@charset "UTF-8";

:root{
    /* Color styles */
    --dh-gradient-1: linear-gradient(257deg, rgba(151,220,235,1.00) 0%,rgba(160,240,213,1.00) 100%);
	--dh-gradient-2: linear-gradient(257deg, rgba(178,228,239,1.00) 0%,rgba(162,255,224,1.00) 100%);
    --dh-accent-1: rgba(155, 228, 227, 1);
    --dh-accent-2: rgba(173, 255, 231, 1);
    --dh-accent-3: rgba(202, 255, 239, 1);
	--dh-accent-4: rgba(93, 208, 187, 1);
    --dh-color-purple-ac: rgba(109, 90, 229, 1);
    --dh-color-blue-ac: rgba(29, 118, 206, 1);
    --dh-color-orange-ac: rgba(255, 112, 67, 1);
    --dh-main-font-ac: rgba(25, 17, 77, 1);
    --dh-main-font-color: rgba(51, 51, 51, 1);
    --dh-gray-1: rgba(89, 89, 89, 1);
    --dh-gray-2: rgba(104, 102, 115, 1);
    --dh-gray-3: rgba(117, 117, 117, 1);
    --dh-border-1: rgba(209, 209, 209, 1);
    --dh-border-2: rgba(195, 195, 195, 1);

    /* Effect styles */
    --shadow1:  0px 0px 14px rgba(228, 228, 228, 1);
}

/* base */
body {position: relative; background:#fff; font-family: 'Noto Sans KR';}
html,body{
	width: 100%;
	height: 100%;
	overflow-x: hidden;	
}
input[type="text"], input[type="tel"], input[type="email"], input[type="password"], input[type="url"], input[type="number"], input[type="search"], input[type="date"], textarea {
	border: 1px solid var(--dh-border-2);
	border-radius: 3px;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: 'Noto Sans KR';
}
button:disabled {
	background-color: var(--dh-border-2) !important;
	border: none !important;
	color: #fff;
}
.wrapper {
	height: auto;
	min-height: 100%;
	/*padding-bottom: 213px;*/
}
.main-container {
	position: relative;
	/*padding-top: 20px;*/
}
.main-inner-wrap{
	max-width: 1300px;
    margin: 0 auto;
	position: relative;
    z-index: 1;
}
.cmn-container {
	padding-top: 50px;
	background-image: url(/images/2024_images/sub-bg.png);
	background-repeat: no-repeat;
	background-position: 0px -110px;
}

.mainbg-left,.mainbg-right {
	position: absolute;
	z-index: 0;
}
.mainbg-left {
	background-image: url(/images/2024_images/sub-bg.png);
	background-repeat: no-repeat;
	width: 489px;
	height: 806px;
	left: 0;
	top: -164px;
}
.mainbg-right {
	background-image: url(/images/2024_images/sub-bg2.svg);
	background-repeat: no-repeat;
	width: 985px;
	height: 849px;
	right: 0;
	top: 0;
}
.fc-purple{
	color: var(--dh-color-purple-ac);
}
.fc-blue{
	color: var(--dh-color-blue-ac);
}
.fc-orange{
	color: var(--dh-color-orange-ac);
}
.no-border{
	border: none !important;
}
.align-center{
	text-align: center;
}
.align-right{
	text-align: right;
}
.fw-700{
	font-weight: 700;
}
.mb-20 {
	margin-bottom: 20px;
}
.btn{
	border-radius: 5px;
}
/* !input 부품! */
/* 첨부파일 박스 */
.file-info{
	float: right;
	font-size: 12px;
	color: var(--dh-gray-2);
}
.select-file-list {
    min-height: 70px;
    overflow: auto;
    border: 1px solid var(--dh-border-2);
	border-radius: 3px;
}
.select-file-list .filebox {
	display: flex;
	align-items: center;
	padding: 5px 10px;
}
.select-file-list .filebox p {
    font-size: 14px;
    display: inline-block;
}
.select-file-list .filebox .delete i{
    display: block;
	width: 22px;
	height: 22px;
	background: url(/images/2024_icons/delete.png);
	cursor: pointer;
}
 /* 첨부파일 버튼 리디자인 */
 input[type="file"] {
	display: none;
}
.btn-upload {
	background-color: var(--dh-main-font-ac);
	font-size: 15px;
	color: #fff;
	padding: 4px 10px;
	margin-bottom: 5px;
}
/* select 디자인 */
select {
	height: 32px;
	background: url(/images/2024_icons/expand_more.png) calc(100% - 5px) center no-repeat;
	padding: 5px 30px 5px 10px;
	border: 1px solid var(--dh-border-2);
	border-radius: 3px;
	font-size: 14px;
	min-width: 110px;
}
select option {
	color: #333;
	padding: 3px 0;
}
select option:hover {
	background: rgb(58, 58, 58)
}
/* 체크박스 디자인 */
.check-wrap {
	margin-left: 10px;
}
input[type="checkbox"]{
	display: none;
}
input.check-btn + label{	
	cursor:pointer;
} 
input.check-btn + label > span{
	vertical-align: middle;
	padding-left: 5px;
}
  
/* label:before에 체크하기 전 상태 CSS */
input.check-btn + label:before{
	content:"";
	display:inline-block;
	width:24px;
	height:24px;
	background: url(/images/2024_icons/check_box_outline_blank.png);
	vertical-align:middle;
}
	
/* label:before에 체크 된 상태 CSS */  
input.check-btn:checked + label:before{
	background: url(/images/2024_icons/check_box.png);
}

.calendar-spacer {
	margin:0 5px;
}
/* inputbox disabled */
input[type="text"]:disabled, select:disabled, input[type="search"]:disabled {
    background-color: #f5f5f5;
    color: #adadad;
    opacity:1;
}
/* 라디오버튼 커스텀 */
.radio-wrap > label {
	margin-right: 10px;
}
.radio-wrap > label >input[type="radio"]{
	margin-right:3px;
}
[type="radio"], span {
  vertical-align: middle;
}

[type="radio"] {
  appearance: none;
  border:1px solid var(--dh-border-1);
  border-radius: 50%;
  width: 20px;;
  height: 20px;
}

[type="radio"]:checked {
  border: 6px solid var(--dh-color-orange-ac);
}

input[type=radio]:focus {
	outline: none;
}
[type="radio"]:hover {
  box-shadow: 0 0 0 max(4px, 0.2em) lightgray;
  cursor: pointer;
}

[type="radio"]:hover + span {
  cursor: pointer;
}

[type="radio"]:disabled {
  background-color: #fff;
  border: 1px solid #ADADAD;
  box-shadow: none;
  opacity: 0.7;
  cursor: not-allowed;
}
[type="radio"]:checked:disabled {
  background-color: #fff;
/*   border: 6px solid #ADADAD; */
  border: 6px solid var(--dh-color-orange-ac);
  box-shadow: none;
  opacity: 0.7;
  cursor: not-allowed;
}

[type="radio"]:disabled + span {
  opacity: 0.7;
  cursor: not-allowed;
}

input[type="search"] {
	height:32px;
}

/* ! ===input 부품! END === */

.sub-wrap {
	display: flex;
	max-width: 1300px;
	margin: 0 auto;
}

/* 헤더 */
#header {
	background:#fff;
	height:110px; 
	border-bottom:1px solid var(--dh-border-1);
	position: relative;
    z-index: 10;
}
#header .hd-wrapper,
#header .mobile-wrapper {
	display:flex;      
	justify-content:space-between;
	align-items:center;
	max-width:1300px;
	margin:0 auto;
	height: 100%;
}

.menu-wrapper .sub-top-menu {
	display:flex;
	justify-content: flex-end;
	align-items:center;
}

.sub-top-menu .btn-header > a {
	color:var(--dh-gray-1);
	font-size:12.5px;
	padding:3px 6px;
}

.connect-dot {
	display:block;
	width:2px;
	height:2px;
	background:var(--dh-gray-1);
	margin: 0 10px;
}

.sub-top-menu .btn-header {
	display:flex;
	align-items: center;
}
.after-login > p {
	margin:0;
	color:var(--dh-gray-1);
	font-size:12.5px;
}
.after-login .user-name {
	font-weight:500;
	color:var(--dh-color-blue-ac);
}
.after-login .my-page {
	font-weight:700;
	color: var(--dh-color-orange-ac) !important;
}

/* 헤더 - 다중언어 선택 */
.langselect-container {
  position: relative;
  display: inline-block;
}

.lang-button {
	display: flex;
    align-items: center;
	border:none;
	color:var(--dh-gray-1);
	text-transform:uppercase;
	font-size:12.5px;
}
.lang-button::before {
	content:'';
	display:block;
	width:113px;
	height:24px;
	background:url(/images/2024_icons/langChg.png) no-repeat;
	margin-right: 5px;
}

.lang-content {
  display: none;
  position: absolute;
  left:50%;
  transform:translateX(-50%);
  background-color: #fff;
  min-width: 140px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border:1px solid var(--dh-border-2);
  border-radius:5px;
  z-index: 81;
}

.lang-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.lang-content a:hover {
	background-color: #f1f1f1;
}

/* 헤더 - 메인GNB */
.gnb-wrap {
    display: flex;
    align-items:center;
}

.gnb {
    display: flex;
    margin-right: 25px;
}

.gnb .screen {
    background-color: #fff;
    width: 100%;
    height: 0px;
    position: absolute;
    top: 110px;
    left: 0;
    right: 0;
    overflow: visible;
    transition: all ease .3s;
}
.gnb.drop .screen {
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 110px;
    left: 0;
    right: 0;
    overflow: visible;
    box-shadow: 0px 6px 14px rgba(228, 228, 228, 0.5);
    transition: all ease .3s;
}
.gnb-tit {
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 0.3s;
    color: var(--dh-main-font-ac);
    font-weight:700;
    font-size:19px;
}
.gnb-tit:hover {
	color: var(--dh-main-font-ac);
}
.gnb-tit.line {
    background-image: linear-gradient(257deg, rgba(150,221,237,0.30) 0%,rgba(160,239,214,0.30) 100%);
}
.gnb-tit.gnb-hov {
    background-size: 100% 100%;
}
.gnb-tit.gnb-hov + .dep2 {
   	/* background-color:#f8f8f8; */
   	background-image: linear-gradient(257deg, rgba(150, 221, 237, 0.178) 0%,rgba(160, 239, 214, 0.158) 100%);
    transition: all ease-in-out .3s;
}
li.gnb-list {
    position: relative;
    padding: 24px 0px;
    width: 192px;
    text-align: center;
}
.gnb.drop .dep2 {
    position: absolute;
    left: 0;
    right: 0;
    top:80px;
    height:100%;
    transition: all ease .3s;
    z-index: 80;
}
.gnb .dep2 {
    position: absolute;
    left: 0;
    right: 0;
    top: 80px; /* 수정 필요 */
    text-align: left;
    height:0;
    overflow: hidden;
    transition: all ease .3s;
    z-index: 80;
    border-left:1px solid var(--dh-border-2);
}
.gnb .gnb-list:last-child .dep2 {
    border-right:1px solid var(--dh-border-2);
}
ul.dep2 > li > a {
    padding:14px;
    display: block;
    font-size: 15px;
    text-align:center;
    position: relative;
}
ul.dep2 > li > a:hover {
    color:#333;
    font-weight:700;
}

/*사이트맵*/
.site-map > a,
.mobile-menu > a {
	display:block;
	width:45px;
	height:45px;
	background:var(--dh-gradient-1);
	border-radius:45px;
	position:relative;
}
.site-map > a::before,
.mobile-menu > a::before {
	content:'';
	display:inline-block;
	width:22px;
	height:18px;
	background:url(/images/2024_icons/hamburger.png)no-repeat;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
#sitemap-modal {
	position: fixed; 
	left:0; 
	top:0; 
	width: 100%; 
	height: 100%; 
	display: none;
	z-index: 10; 
}
#sitemap-modal .modal-bg {
	background: rgba(0,0,0,0.7); 
	display:flex; 
	align-items: center; 
	justify-content: center; 
	height: 100%; 
}
#sitemap-modal .modal-bg .modal-cont {
	position:relative; 
	background: #fff; 
	padding: 40px; 
	max-width: 860px; 
	display: inline-block;
	border-radius:20px;
	z-index:10;
	overflow:hidden;
}
#sitemap-modal .modal-bg .modal-cont::before {
	content:'';
	display:inline-block;
	width:404px;
	height:350px;
	background:url(/images/2024_images/sitemap-bg-1.png)no-repeat;
	opacity:0.6;
	position:absolute;
	left:0;
	top:0;
	z-index:-1;
}
#sitemap-modal .modal-bg .modal-cont::after {
	content:'';
	display:inline-block;
	width:326px;
	height:173px;
	background:url(/images/2024_images/sitemap-bg-2.png)no-repeat;
	position:absolute;
	right:0;
	bottom:0;
	z-index:-1;
}
#sitemap-modal .modal-bg .modal-cont h2 {
	font-size: 36px;
	font-weight:700; 
	margin-top:20px;
	line-height: normal;
	color: var(--dh-main-font-ac);
}
#sitemap-modal .modal-bg .modal-cont p {
	font-size: 18px; 
}
#sitemap-modal .modal-bg .modal-cont .close {
	position: absolute; 
	top: 18px; 
	right:18px; 
	width:50px;
	height:50px;
	background:url(/images/2024_icons/layer-close.png)no-repeat;
	padding: 10px; 
}
.sitemap-wrap .sitemap-cont {
	display:flex;
	align-items: flex-start;
	margin-top:60px;
}
.sitemap-wrap .sitemap-cont > li {
	width:160px;
	min-height:180px;
	padding:0 12px;
	border-right:1px solid var(--dh-border-2);
}
.sitemap-wrap .sitemap-cont > li:last-child {
	border-right:none;
}
.sitemap-wrap .sitemap-cont > li > a {
	display:block;
	color:var(--dh-main-font-ac);
	font-size:17px;
	font-weight:700;
	padding:10px 0;
	text-align:center;
	border-bottom: 2px solid #333;
}
.sitemap-wrap .sitemap-cont > li .sitemap-deps2 {
	margin-top:10px;
}
.sitemap-wrap .sitemap-cont > li .sitemap-deps2 > li > a{
	display:block;
	padding:5px 0;
	font-size:14px;
	text-align:center;
}
.sitemap-wrap .sitemap-cont > li .sitemap-deps2 > li > a:hover{
	font-weight:700;
	color:var(--dh-color-blue-ac);
}

/* 모바일 메뉴 - 모바일 사이즈 일시 보여짐*/
#mobilemenu-wrapper {
	display:none;
	position: absolute;
    background: #f5f5f5;
    border-left:1px solid var(--dh-border-2);
    top: 55px;
    right: -100%;
    z-index: 10;
    width: 100%;
    max-width: 340px;
    height: calc(100vh - 55px);
   /*opacity: 0;*/
    overflow-y: auto;
    overflow-x: hidden;
}
#mobilemenu-wrapper .sub-top-menu{
	display:flex;
	align-items:center;
	padding:10px 20px;
	border-bottom:1px solid var(--dh-border-2);
	background: #fff;
}
#mobilemenu-wrapper .menu-list {
	background: #fff;
}
#mobilemenu-wrapper .menu-list .menu-link {
	font-size: 15px;
	font-weight: 700;
	color: var(--dh-main-font-ac);
}
#mobilemenu-wrapper .menu-list .menu-submenu > li > a {
	display: block;
	padding: 10px 30px;
	font-size: 14px;
	background: #fff;
}
#mobilemenu-wrapper .menu-list .menu-submenu > li > .head::before {
	content: '-';
	margin-right: 8px;
}
#mobilemenu-wrapper .menu-list .menu-submenu > li > a:hover {
	color: var(--dh-color-blue-ac);
}
#mobilemenu-wrapper .menu-list li.accordion-toggle, #menu-container .menu-list .menu-login {
    font-size: 14px;
    padding: 10px 20px;
    text-transform: uppercase;
    border-top: 1px solid var(--dh-border-2);
}
#mobilemenu-wrapper .menu-list li:first-of-type {
    border-top: 0;
}
#nav5 {
	border-bottom: 1px solid var(--dh-border-2);
}
.accordion-toggle, .accordion-content {
    cursor: pointer;
    font-size: 16px;
    position: relative;
    letter-spacing: 1px;
}

.accordion-content:last-child{
    border-bottom: 1px solid var(--dh-border-2);
}
.accordion-content {
    display: none;
}

.accordion-toggle a:before, .accordion-toggle a:after,
:not(.calendar  a:before), 
:not(.calendar  a:after) {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 30px;
    width: 15px;
    height: 2px;
    margin-top: -1px;
    background-color: var(--dh-main-font-ac);
    transform-origin: 50% 50%;
    transition: all 0.3s ease-out;
}

.accordion-toggle a:before {
    transform: rotate(-90deg);
    opacity: 1;
    z-index: 2;
}

.accordion-toggle.active-tab {
	background-image: linear-gradient(257deg, rgba(150,221,237,0.30) 0%,rgba(160,239,214,0.30) 100%);
  transition: all 0.3s ease;
}
.accordion-toggle a.active:before {
    transform: rotate(0deg);
}

.accordion-toggle a.active:after {
    transform: rotate(180deg);
    opacity: 0;
}

/*  header 반응형 */
.mobile-menu {
	display:none;
}
@media screen and (max-width:1214px) {
	li.gnb-list {
	width:160px;
	}
}
@media screen and (max-width:1052px) {
	#header {
		height:55px;
	}
	#header .hd-wrapper {
		height:55px;
		position:relative;
		padding: 0 20px;
	}
	#logo img {
		height:25px;
	}
	#header .hd-wrapper .menu-wrapper{
		position:absolute;
		top:55px;
		right:0;
		display:none;
	}
	.site-map {display:none;}
	.mobile-menu {display:block;}
	.mobile-menu > a {background:var(--dh-gradient-1);}
	#mobilemenu-wrapper {display:block;}
}


/* footer */

.footer {
	background: #454545;
    /*position: relative;
    transform: translateY(-100%);*/
}
.footer .ft_sub {
	margin: 0px auto;
	padding:35px 0; 
	width: 100%; 
	max-width: 1300px;
}
.ft_sub::after {
	clear: both; 
	display: block; 
	content: "";
}
.footer_01 {
	padding:20px 10px; 
	width:80%; 
	float:left
}
.footer_logo {
	float:none; 
	padding:10px 0; 
	text-align:center;
}
.footer_logo img {
	 height:35px;   
	 vertical-align: middle; 
	}
.footer_info {
	float:none; 
	padding-left:0; 
	text-align:center;
}
.footer_info .address > p {
	padding: 0 2px; 
	font-size: 13px; 
	color: #adadad; 
	line-height: 20px; 
	text-align: left;
}
.footer_02 {
	padding:20px 10px; 
	width:20%; 
	float:right
}
.navi_foot {
	margin-bottom:20px;
}
.navi_foot li {
	display:inline-block; 
	position:relative; 
	padding:0 10px;
}
.navi_foot li:first-child {
	padding:0 10px 0 0;
}
@media screen and (max-width:500px){
	.footer_info .address > p {
		text-align: left !important;
	} 
}
.navi_foot li:after {
    content: '';
    position: absolute;
    left: -3px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 15px;
    background: #b6b6b6;
}
.navi_foot li:first-child:after {
	display:none;
}
.navi_foot li a {
	display:block; 
	color:#fff; 
	font-size:16px;
	transition:0.4s; 
}
.navi_foot li a:hover { 
	color:#f6cb01
}

/*Family site*/
.select_ty {
	display: inline-block;
	vertical-align: middle;
	width: 207px;
	height: 32px;
	background-color: #2d2d2d;
	position: relative;
}

.select_ty>a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 10;
	height: 100%;
	padding-left: 19px;
	font-size: 12px;
	color: #fff;
	text-align: left;
	line-height: 27px;
	transition: all .2s;
	text-decoration: none;
}

.select_ty .icon {
	position: relative;
	display: inline-block;
	width: 26px;
	height: 17px;
	overflow: hidden;
}

.select_ty .icon:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	-webkit-transform: translate(-50%, -50%) rotate(45deg);
	transform: translate(-50%, -50%) rotate(45deg);
	margin-top: 2px;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
}

.select_ty .icon.rotate:before {
	transform: translate(-50%, -50%) rotate(-135deg);
	-webkit-transform: translate(-50%, -50%) rotate(-135deg);
	margin-top: -4px;
}

.select_ty ul {
	position: absolute;
	bottom: 2px;
	width: 100%;
	padding: 5px 27px;
	margin-bottom: 29px;
	background: #161616;
	border-bottom: 0;
	display: none;
}

.select_ty ul li a {
	display: block;
	position: relative;
	padding: 5px 0;
	font-size: 12px;
	color: #dddfe2;
	text-decoration: none;
}
.select_ty ul li a:hover{
	color:#2879fe
}
.select_ty ul.show {
	display: block;
}

/* footer 반응형 */
@media screen and (min-width: 1245px) {
	.footer_01 {
		padding:20px 0; 
	}
	.footer_logo {
		float:left; 
		padding:35px 0 0 0;
	}
	.footer_info {
		float:left; 
		text-align:left; 
		padding-left:50px;
	}
}
@media screen and (max-width:1245px){
	.footer .ft_info {
		padding: 20px 5% 20px 18%; 
		width: 85%;
	}
	.footer_info .address > p {
		text-align: center;
	}
	.footer_01 { 
		width:100%;
	}
	.footer_02 { 
		width:100%; text-align:center
	}
}
@media screen and (max-width: 640px) {
	.navi_foot li a {
		display:block; 
		color:#fff; 
		font-size:12px;
		transition:0.4s; 
	}
	.navi_foot li {
		padding:0 3px;
	}
	.navi_foot li:after {
		width:0px; 
	}
	.navi_foot li:first-child {
		padding: 0 3px;
	}	
	.footer_info {
		padding-top:15px;
	}
}





/* Left Navigation Bar - 좌측 메뉴 */
#lnb {
	max-width: 240px;
	width: 100%;
}
#lnb .top {
	background-image: var(--dh-gradient-2);
	border-radius: 20px 20px 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 123px;
}
#lnb .top > strong {
	font-size: 26px;
	font-weight: 700;
	margin-bottom: 10px;
	color: var(--dh-main-font-ac);
}
#lnb .lnb-menu {
	background: #fff;
	padding: 36px 20px;
	margin-top: -20px;
	border-radius: 20px;
	border: 1px solid var(--dh-border-2);
}
#lnb .lnb-menu ul li.present {
	font-weight: 700;
	color: var(--dh-main-font-ac);
}
#lnb .lnb-menu ul li.present > a {
	/* 'presnet' class를 넣어 현재 어디에 있는지 표시 */
	border-bottom:2px solid transparent !important;
	border-image: var(--dh-gradient-1) !important;
	border-image-slice: 1 !important;
}
#lnb .lnb-menu ul li > a {
	display: block;
	font-size: 15px;
	padding: 12px 15px;
	border-bottom: 1px solid var(--dh-border-2);
}
#lnb .lnb-menu ul li:last-child > a {
	border-bottom: none;
}
#lnb .lnb-menu ul li > a:hover {
	font-weight: 700;
	color: var(--dh-main-font-ac);
}

/* lnb 하위메뉴 */
.menu-item > .submenu {
    display: none;
}
#lnb .lnb-menu ul li.menu-item .submenu li a {
	font-weight: 400;
	border-bottom: none;
	padding: 8px 10px;
	color: #555555;
	font-size:14px
}
#lnb .lnb-menu ul li.menu-item .submenu li.sub-present a {
	font-weight: 700;
}
#lnb .lnb-menu ul li.menu-item .submenu li a:hover {
	font-weight: 700;
}
#lnb .lnb-menu ul li.menu-item .submenu li:last-child a {
	border-bottom: 1px solid var(--dh-border-2);
}
#lnb .lnb-menu ul li.menu-item .submenu li a::before {
	content: '-';
	display: inline-block;
	margin:0 5px;
}
#lnb .lnb-menu ul li a.multiple {
	position: relative;
}
#lnb .lnb-menu ul li a.multiple::after {
	content: '';
	display: inline-block;
	width: 22px;
	height: 22px;
	background: url(/images/2024_icons/chevron_right.png);
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0, -50%) rotate(0deg);
	transition: all .3s ease;
}
#lnb .lnb-menu ul li a.multiple.active::after {
	transform: translate(0, -50%) rotate(90deg);
}

/* 서브 - 본문영역 */
.sub-container {
	margin-left: 40px;
	width: 100%;
}
.sub-tit-sect {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}
.sub-tit-sect > h2 {
	font-family: 'Noto Sans KR' !important;
	font-size: 32px;
	font-weight: 700;
	line-height: 45px;
}

/* 빵부스러기 - breadcrumbs */
#breadcrumbs, #breadcrumbs > li {
	display: flex;
	align-items: center;
	font-size: 14px;
	color: var(--dh-gray-1);
}
#breadcrumbs > li {
	margin-right: 10px;
}
#breadcrumbs > li.last {
	font-weight: 700;
}
#breadcrumbs > li.home::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url(/images/2024_icons/home.png);
	margin-right: 2px;
	padding: 0;
}
#breadcrumbs > li::before {
	content: '>';
	display: inline-block;
	padding-right: 10px;
	font-weight: 400;
}

/* 서브화면 본문 영역 */
.sub-cont-sect .view-top {
	border-top: 2px solid var(--dh-main-font-color);
	padding: 20px 10px;
}
.sub-cont-sect .view-top .view-tit {
	font-weight: 700;
	margin-bottom: 8px;
}
.sub-cont-sect .view-top .view-info {
	color: var(--dh-gray-1);
	font-size: 12px;
}
.view-info .view-count::before {
	content: '|';
	display: inline-block;
	margin: 0 6px;
	font-weight: 700;
}
/* 서브화면 첨부파일 영역 */
.sub-cont-sect .view-file {
	background: #f8f8f8;
	border-top: 1px dashed var(--dh-border-2);
	border-bottom: 1px dashed var(--dh-border-2);
	padding: 10px;
}
/*.sub-cont-sect .view-file .file-list li{
	margin-bottom: 5px;
}
*/
.sub-cont-sect{
	margin-bottom:100px;
}

/* 첨부파일 목록을 다른화면에서도 사용하기 위해 간략화 */
.file-list li{
	margin-bottom: 5px;
}
.file-list li:last-child{
	margin-bottom: 0px;
}
.file-list li > a {
	display: inline-block;
	color: var(--dh-color-orange-ac);
	font-size: 14px;
	position: relative;
	padding-left: 24px;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 50ch; /* 50자로 제한 */
}
.file-list li > a::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url(/images/2024_icons/icon-file.png) no-repeat center;
	position: absolute;
	left: 0;
	top: 10px;
	transform: translateY(-50%);
}

/* 서브화면 바디 */
.sub-cont-sect .view-body {
	padding: 30px 10px;
}

/* 서브화면 하단 */
.view-bottom  {
	margin-bottom: 20px;
}
.view-bottom .view-pre-next{
	border-top: 1px solid var(--dh-border-2);
	border-bottom: 1px solid var(--dh-border-2);
}
.view-bottom .view-pre-next dl {
	padding: 15px 10px;
}
.view-bottom .view-pre-next .view-prev {
	border-bottom: 1px solid var(--dh-border-2);
}
.view-bottom .view-pre-next dl > dt {
	float: left;
	padding-right: 25px;
    font-weight: 700;
    clear: both;
}
.view-bottom .view-pre-next dl > dd > a:hover {
	color: var(--dh-color-blue-ac);
}

/* 서브화면 하단 버튼 */
.sub-btn-area {
/* 	margin-bottom: 50px;
	text-align: right; */
	
	/* 2024-06-24 슬기씨 요청사항 */
	justify-content: flex-end;
	margin-bottom: 50px;
	display: flex;
}
.sub-btn-area > button {
	font-size: 16px;
	font-weight: 700;
	padding: 10px;
	border-radius: 10px;
	width: 150px;
	margin-right: 5px;
	transition: all .3s ease;
}
.sub-btn-area > button:last-child {
	margin-right: 0;
}
.sub-btn-area > button.fill-navy,
.btn.fill-navy {
	background-color: var(--dh-main-font-ac);
	border:1px solid var(--dh-main-font-ac);
	color: #fff;
}
.sub-btn-area > button.fill-navy:hover,
.btn.fill-navy:hover  {
	background-color: rgb(17 1 127);
	border:1px solid rgb(17 1 127);
}
.sub-btn-area > button.fill-mint,
.btn.fill-mint{
	background-color: var(--dh-accent-4);
	border:1px solid var(--dh-accent-4);
	color: #fff;
}
.sub-btn-area > button.fill-mint:hover,
.btn.fill-mint:hover{
	background-color: rgb(45, 163, 142);
	border:1px solid rgb(45, 163, 142);
	color: #fff;
}
.sub-btn-area > button.fill-blue,
.btn.fill-blue{
	background-color: var(--dh-color-blue-ac);
	border:1px solid var(--dh-color-blue-ac);
	color: #fff;
}
.sub-btn-area > button.fill-blue:hover,  
.btn.fill-blue:hover{
	background-color: rgb(7 82 155);
	border:1px solid rgb(7 82 155); 
	color: #fff;
}
.sub-btn-area > button.delete,
.btn.delete{
	background-color: var(--dh-main-font-color);
	border:1px solid var(--dh-main-font-color);
	color: #fff;
}
.sub-btn-area > button.delete:hover,
.btn.delete:hover{
	background-color: #000;
	border:1px solid #000;
	color: #fff;
}

/* 리스트 내에 있는 버튼 정의 */
.list-table-wrap .list-table table tbody tr td > .primary {
	background-color: var(--dh-accent-4);
	padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    color: #fff;
}

.list-table-wrap .list-table table tbody tr td > .primary:hover {
	background-color: #00A380;
}

.list-table-wrap .list-table table tbody tr td > .primary-empty {
	padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    color: #00C49A;
	border:1px solid var(--dh-accent-4);
}

.list-table-wrap .list-table table tbody tr td > .primary-empty:hover {
	background-color: var(--dh-accent-4);
	padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    color: #fff;
}

.list-table-wrap .list-table table tbody tr td > .danger-empty {
	padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    color: #EF476F;
	border:1px solid #EF476F;
}

.list-table-wrap .list-table table tbody tr td > .danger-empty:hover {
	background-color: #EF476F;
	padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    color: #fff;
}

/* 서브화면 - 등록 */
.sub-cont-sect .edit-sect .edit-form,
.table-sect .table-form{
	margin-bottom: 20px;
	border-top: 2px solid var(--dh-main-font-color);
}
.edit-form > dl,
.table-form > dl  {
	border-bottom: 1px solid var(--dh-border-2);
	display: flex;
}
.edit-form > dl dt {
	width: 110px;
	background: #f5f5f5;
	padding: 15px 10px;
	font-size: 15px;
	font-weight: 700;
	line-height: 32px;
}
.edit-form > dl dd {
	padding: 15px 10px;
	width: 100%;
	font-size: 14px;
}.edit-form > dl dd.cont-dob,
.table-form > dl dd.cont-dob {
	display: flex;
	align-items: center;
}
.edit-form > dl dd input[type="text"], input[type="password"],
.table-form > dl dd input[type="text"], input[type="password"],
input[type="date"],input[type="text"]{
	padding: 5px;
}
/*.edit-form > dl dd input[type="text"]::placeholder, 
input[type="password"]::placeholder{
	 opacity: 0; 
}*/
.edit-form > dl dd textarea {
	width: 100% !important;
	height: 320px !important;
	resize: none;
}

/* 서브화면 리스트 */
.sub-cont-sect .list-sect .list-search-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
.sub-cont-sect .list-sect .list-search-wrap .total {
	font-size: 16px;
}
.sub-cont-sect .list-sect .list-search-wrap .total > span {
	font-weight: 700;
	vertical-align: unset;
}
.list-search-wrap .search-form,
.list-search-wrap .search-form > span {
	display: flex;
}
.list-search-wrap .search-form > span > input[type="text"]{
	width: 300px;
	height: 32px;
	margin-left: 5px;
	border-radius: 3px 0 0 3px;
}
.list-search-wrap .search-form > span > button.btn-sch {
	background: url(/images/2024_icons/search.png) no-repeat 50% 50%;
	background-color: var(--dh-accent-1);
	border: 1px solid var(--dh-border-2);
	border-left: none;
	border-radius: 0 3px 3px 0;
	padding: 5px 20px;
}

.sub-cont-sect .list-sect .list-table-wrap {
	border-top: 2px solid var(--dh-main-font-color);
}
.sub-cont-sect .list-sect .list-table-wrap .list-table table{
	width: 100%;
	table-layout: fixed;
}
.list-table-wrap .list-table table thead,
.list-table-wrap .list-table table tbody > tr {
	border-bottom: 1px solid var(--dh-border-2);
}
.list-table-wrap .list-table table thead tr th{
	background: rgb(249, 248, 248);
    padding: 0px 10px;
    height: 50px;
    color: rgb(0, 30, 38);
    line-height: 1.4;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
}
.list-table-wrap .list-table table tbody tr td {
	text-align: center;
	font-size: 14px;
	padding: 12px 10px;
    height: 30px;
    line-height: 1.3;
}
.list-table-wrap .list-table table tbody tr .li-tit {
	text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.list-table-wrap .list-table table tbody tr td.listhas-file {
	background:url(/images/2024_icons/icon-file.png) no-repeat 50% 50%;
}

.list-table-wrap .list-table table tbody tr .li-tit > a {
	transition: 0.4s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
	display: block;
	/*HMK 추가*/
	font-size:14px;
}
.list-table-wrap .list-table table tbody tr.top-notice .li-tit > a {
	color: var(--dh-color-blue-ac);
	font-weight: 500;
	transition: all .3s ease;
}
.list-table-wrap .list-table table tbody tr.top-notice .li-tit > a:hover {
	color: var(--dh-color-orange-ac);
}
.list-table-wrap .list-table table tbody tr .li-tit > a:hover {
	color: var(--dh-color-blue-ac);
}

.list-table-wrap .list-table table tbody .tn-label{
	display: block;
	background: var(--dh-color-orange-ac);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	width: 46px;
	line-height: 22px;
	border-radius: 22px 22px 0 22px;
	margin: 0 auto;
}

/* 페이지 버튼 */
.sub-cont-sect .list-sect .list-table-wrap .page-btn-group {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 50px;
}
.list-table-wrap .page-btn-group button.btn-smp {
	padding: 2px 8px;
	height: 27px;
	font-size: 15px;
}
.list-table-wrap .page-btn-group button.btn-pagenum {	
	background: var(--dh-accent-1);
}
.list-table-wrap .page-btn-group button.btn-pagenum.active {	
	border:1px solid var(--dh-main-font-ac);
	background: #b8dad9;
}
.list-table-wrap .page-btn-group button.btn-pagenate {	
	background-color: var(--dh-main-font-ac) !important;
	width: 27px;
	height: 27px;
}
.list-table-wrap .page-btn-group button.first-p {	
	background: url(/images/2024_icons/first_page.png) no-repeat 50% 50%;
}
.list-table-wrap .page-btn-group button.last-p {	
	background: url(/images/2024_icons/last_page.png) no-repeat 50% 50%;
}
.list-table-wrap .page-btn-group button.prev-p {	
	background: url(/images/2024_icons/navigate_prev.png) no-repeat 50% 50%;
}
.list-table-wrap .page-btn-group button.next-p {	
	background: url(/images/2024_icons/navigate_next.png) no-repeat 50% 50%;
}
.list-table-wrap .page-btn-group button.disabled {
	display: none;
}


 /* 서브화면 반응형 */
@media screen and (max-width:1320px) {
	.cmn-container {
		background-image: none;
	}
	.sub-wrap {
		margin:0 20px;
	}
	#lnb {
		min-width: 210px;
	}
}

@media screen and (max-width:890px) {
	.cmn-container {
		padding-top: 35px;
	}
	#lnb {
		display: none;
	}
	.sub-container {
		margin-left: 0;
	}
	.edit-form > dl,
	.table-form > dl {
		display: block;
		padding: 15px 5px;
	}
	.edit-form > dl dt,
	.table-form > dl dt  {
		width: 100% !important;
		background: transparent !important;
		padding: 0 !important;
		font-size: 15px;
		font-weight: 700;
		line-height:normal;
		margin-bottom: 5px;
	}
	.edit-form > dl dd,
	.table-form > dl dd {
		padding: 0 !important;
		width: 100%;
		font-size: 14px;
	}
	.edit-form > dl dd select,
	.table-form> dl dd select {
		width: 35%;
	}
	
	/* 리스트 */
	.sub-cont-sect .list-sect .list-search-wrap {
		flex-direction: column;
		align-items: flex-start;
	}
	.sub-cont-sect .list-sect .list-search-wrap .total {
		/* margin-bottom: 10px; */
		margin-top: 10px;
	}
	.list-search-wrap .search-form,
	.list-search-wrap .search-form > span,
	.list-search-wrap .search-form > span > input[type="text"] {
		width: 100%;
		max-width: 100%;
	}
	.list-table-wrap .list-table table colgroup col {
		width: auto;
	}
	.list-table-wrap .list-table table,
	.list-table-wrap .list-table table tr   {
        display: block;
	}
	.list-table-wrap .list-table table thead {
		display: none;
	}
	.list-table-wrap .list-table table tbody {
		display: block;
	}
	.list-table-wrap .list-table table tbody tr td.mob-hide {
		display: none;
	}
	.list-table-wrap .list-table table tbody tr td.li-tit {
		margin: 0px;
		width: 100%;
		display: block;
	}
	.list-table-wrap .list-table table tbody tr.top-notice .li-tit {
		margin-top: 8px;
		margin-bottom: 20px;
	}
	.list-table-wrap .list-table table tbody tr.top-notice .li-tit > a {
		position: relative;
		padding-left: 56px;
		line-height: 25px;
	}
	.list-table-wrap .list-table table tbody tr.top-notice .li-tit > a::before {
		content: '공지';
		display: inline-block;
		background: var(--dh-color-orange-ac);
		color: #fff;
		font-size: 12px;
		font-weight: 700;
		width: 46px;
		line-height: 24px;
		border-radius: 22px 22px 0 22px;
		text-align: center;
		position: absolute;
		left: 0px;
	}
	.list-table-wrap .list-table table tbody tr td.list-info {
		position: relative;
	}
	.list-table-wrap .list-table table tbody tr td.list-info::after {
		content: '|';
		display: inline-block;
		position: absolute;
		right: -2px;
		top: 50%;
		transform: translateY(-50%);
	}
	.list-table-wrap .list-table table tbody tr td.listhas-file {
		padding: 12px 22px;
	}
	.list-table-wrap .list-table table tbody tr td.list-info:last-child::after {
		display: none;
	}
	

}
@media screen and (max-width:580px) {
	.cmn-container {
        padding-top: 25px;
    }
	.sub-tit-sect > h2 {
		font-size: 26px;
		transition: all .3s ease;
	}
	.sub-tit-sect {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column-reverse;
	}
	#breadcrumbs {
		width: 100%;
		justify-content: flex-end;
		margin-bottom: 10px;
	}
}


/* !! main */
/* 즐겨찾는메뉴 */
.main-section1 {
	display: flex;
	justify-content: space-between;
	margin-bottom: 40px;
	padding-top: 20px !important;
}
.main-section1 .quick-service{
	width: 309px;
	min-width: 230px;
	padding-top: 8px;
	margin-left: 10px;
}
.main-section1 .quick-service .qs-tit {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 24px;
	position: relative;
	z-index: 2;
}
.main-section1 .quick-service .qs-tit::before {
	content: '';
	display: inline-block;
	height: 15px;
	width: 110px;
	background-color: #ADFFE7;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
}
.main-section1 .quick-service .qs-list{
	height: 377px;
}
.main-section1 .quick-service .qs-list .swiper-wrapper{
	height: 332px !important;
}
.main-section1 .quick-service .qs-list .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #BBD1F9;
	background-color: #fff;
	border-radius: 12px;
	overflow: hidden;
}
.main-section1 .quick-service .qs-list .swiper-slide > a {
	width: 100%;
	height: 100%;
	font-size: 15px;
	font-weight: 700;
}
/* .qs-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 124px;
	width: calc(100% / 2 - 10px);
	margin-bottom: 15px;
} */
.qs-item {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.qs-item:hover {
	font-weight: 600;
}
.qs-item::before {
	content: '';
	display: block;
	width: 80px;
	height: 80px;
}

/*.qs-item.favor-vol::before {
	background: url(/images/2024_icons/favor-vol.png) no-repeat center;
}
.qs-item.favor-edu::before {
	background: url(/images/2024_icons/favor-edu.png) no-repeat center;
}
.qs-item.favor-vc::before {
	background: url(/images/2024_icons/favor-vc.png) no-repeat center;
}	*/
.qs-item.favor-cns::before {
	background: url(/images/2024_icons/new-favor-cns.png) no-repeat center;
}
.qs-item.favor-pnt::before {
	background: url(/images/2024_icons/new-favor-pnt.png) no-repeat center;
}

.qs-item.favor-qna::before {
	background: url(/images/2024_icons/new-favor-qna.png) no-repeat center;
}
.qs-item.favor-cs::before {
	background: url(/images/2024_icons/new-favor-cs.png) no-repeat center;
}

.main-section1 .quick-service .qs-list .swiper-control {
    display: flex;
    align-items: center;
	justify-content: space-between;
    position: absolute;
    left: 0;
	right: 0;
	top:auto;
	bottom: 0;
    z-index: 10;
    padding: 0 !important;
	padding-top: 12px !important;
    background-color: transparent;
    border-radius: 0 20px 0 20px;
}
.main-section1 .quick-service .qs-list .swiper-control .swiper-pagination-bullets {
	bottom: auto;
	margin-right: 0;
}
.main-section1 .quick-service .qs-list .swiper-control .swiper-pagination-bullets .swiper-pagination-bullet {
	background-color: #667e97;
}
.main-section1 .quick-service .qs-list .swiper-control .swiper-pagination-bullets .swiper-pagination-bullet-active {
	background-color: #74B8FB;
	width: 18px;
	height: 18px;
}
.main-section1 .quick-service .qs-list .swiper-control .qs-button-prev,
.main-section1 .quick-service .qs-list .swiper-control .qs-button-next{
	width: 32px !important;
	height: 32px !important;
	border: 1px solid #BBD1F9;
}
.main-section1 .quick-service .qs-list .swiper-control .swiper-pagination-lock, 
.main-section1 .quick-service .qs-list .swiper-control .swiper-pagination-bullet:only-child {
	display: block !important;
}
/* 메인 슬라이드 배너 - swiper */
.main-banner-sect {
	max-width: 970px;
	height: auto;
	border-radius: 20px;
	overflow: hidden;
}
.swiper {
	width: 100%;
	height: 100%;
  }
.swiper-slide {
	height: 100%;
}
.swiper-slide > a {
	display: block;
    box-sizing: border-box;
    overflow: hidden;
	object-fit: cover;
}
.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* swiper controller 조정 */
.main-banner-sect{
	position: relative;
	box-shadow: 0px 0px 14px rgba(228, 228, 228, 0.9);
}

.swiper-control {
	display: flex;
	align-items: center;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 10;
	padding: 16px 24px;
	background-color: rgba(0,0,0,0.1);
	border-radius: 0 20px 0 20px;
}
#swiper-toggleButton {
	display: block;
	width: 24px;
	height: 24px;
	background-color: #fff;
	border-radius: 50px;
	cursor: pointer;
	position: relative;
	margin: 0 10px;
}
#swiper-toggleButton img {
	display: block;
	width: 18px;
	height: 18px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/* !!swiper.css 강제 조정 */
.swiper-pagination{
	position:  relative !important;
	width: auto !important;
	margin-right: 15px;
}
.swiper-pagination-fraction {
	bottom: auto !important;
	top: auto !important;
    left: 0;
    width: 100%;
}
.swiper-button-next,
.swiper-button-prev{
	position:static !important;
	width:24px !important;
	height:24px !important;
	margin-top:0 !important;
	display: flex !important;
	color:transparent !important;
	background-color: #fff;
	border-radius: 50px;
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next{
	left:auto !important;
	right:auto !important;
}
.swiper-button-next:after,
.swiper-button-prev:after{
	font-family:'Malgun Gothic' !important;
	font-size:0 !important;
	display: block;
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after{
	content:'';
	width: 18px;
	height: 18px;
	background: url(/images/2024_icons/play_prev.png);
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev{
	right:auto;
	left:auto
}
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after{
	content:'';
	width: 18px;
	height: 18px;
	background: url(/images/2024_icons/play_next.png);
}

/* 메인화면 - 슬라이드형 공지사항 */
.main-section2 {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	position: relative;
}
.main-section2 .dh-notice {
	min-width: 200px;
}
.main-section2 .dh-notice .notice-tit {
	font-weight: 700;
	font-size: 32px;
	color: var(--dh-main-font-ac);
}
.main-section2 .dh-notice a.notice-more {
	display: flex;
	align-items: center;
	font-size: 15px;
	margin-top: 18px;
	padding: 5px 15px 5px 13px;
	border: 1px solid var(--dh-border-2);
	background-color: #fff;
	width: 100px;
	border-radius: 50px;
}
.main-section2 .dh-notice a.notice-more::before {
	content: '';
	display: inline-block;
	width: 22px;
	height: 22px;
	background: url(/images/2024_icons/more.png);
	margin-right: 2px;
}

.main-section2 .dh-notice-slider {
	width: calc(100% - 200px);
}
.main-section2 .dh-notice-slider .swiper-notice-content {
	border: 1px solid var(--dh-border-2);
	border-radius: 20px;
	background-color: #fff;
	padding: 10px 12px;
}
.main-section2 .swiper-notice-content .notice-label{
	color: var(--dh-color-blue-ac);
	font-size: 16px;
}
.main-section2 .swiper-notice-content .notice-tit{
	/* width: 308px; */
	height: 57px;
	color: var(--dh-main-font-ac);
	font-size: 20px;
	font-weight: 700;
	margin: 10px 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.main-section2 .swiper-notice-content .notice-date {
	font-size: 15px;
	text-align: right;
	color: var(--dh-gray-3);
	padding-top: 10px;
	border-top: 1px solid var(--dh-border-2);
}
/* 슬라이드형 공지사항 - pagenation 조정 */
.main-section2 .swiper-control {
	left: 110px !important;
	right: auto;
	top: 54px;
	bottom: auto;
	padding: 0;
	background-color: transparent;
}
.main-section2 .swiper-control .swiper-button-next,
.main-section2 .swiper-control .swiper-button-prev{
	position:static !important;
	width:34px !important;
	height:34px !important;
	margin-top:0 !important;
	display: flex !important;
	color:transparent !important;
	background-color: #fff;
	border-radius: 50px;
	border: 1px solid var(--dh-border-2);
}
.main-section2 .swiper-control .swiper-button-prev{
	margin-right: 10px;
}

/* 메인 - 카운터 */
.dh-main-counter {
	min-height: 347px;
	margin-top: 100px;
	position: relative;
	background: url(/images/2024_images/couter-bg.png) no-repeat;
}
.dh-main-counter .main-section3 {
	display: flex;
	align-items:flex-end;
	justify-content: space-between;
	max-width: 1300px;
    margin: 0 auto;
	margin-bottom: 40px;
	padding-top: 38px;
	position: relative;
	z-index: 1;
}
.dh-main-counter .main-section3 .dh-main-info > h2 {
	font-size: 34px;
	font-weight: 700;
}
.dh-main-counter .main-section3 .dh-main-info > h2 > span {
	display: inline-block;
	vertical-align: baseline;
}
.dh-main-counter .main-section3 .dh-main-info > p {
	width: 390px;
	margin-top: 20px;
	font-size: 17px;
	word-break: keep-all;
	color: var(--dh-gray-2);
} 

/* counter */
.dh-counter{
	width: calc(100% - 490px);
}
.dh-counter > p {
	font-size: 11px;
	text-align: right;
	color: var(--dh-gray-1);
	margin-bottom: 30px;
}
.dh-counter .counter-wrap {
	display: flex;
	justify-content: space-between;
}
.dh-counter .counter-wrap .counter-cont {
	text-align: center;
	min-width: 135px;
}
.dh-counter .counter-wrap .counter-icon{
	display: block;
	width: 60px;
	height: 60px;
	margin: 0 auto;
}
.dh-counter .counter-wrap .counter-icon.volunteer{
	background: url(/images/2024_icons/donghaengicon_1.png);
}
.dh-counter .counter-wrap .counter-icon.agency{
	background: url(/images/2024_icons/donghaengicon_2.png);
}
.dh-counter .counter-wrap .counter-icon.partner-agency{
	background: url(/images/2024_icons/donghaengicon_3.png);
}
.dh-counter .counter-wrap .counter-icon.program{
	background: url(/images/2024_icons/donghaengicon_4.png);
}
.dh-counter .counter-wrap .counter {
	font-size: 40px;
	font-weight: 700;
	color: var(--dh-main-font-ac);
}

/* 동행메인 - SNS */
.main-section4 {
	margin-bottom: 40px;
}
.section-tit-wrap {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 40px;
}
.section-tit-wrap .section-tit {
	display: flex;
	align-items: flex-end;
}
.section-tit-wrap .section-tit > h2 {
	font-size: 32px;
	color: var(--dh-main-font-ac);
	font-weight: 700;
	margin-right: 10px;
}
.section-tit-wrap .section-tit > span {
	display: block;
	font-size: 18px;
	color: var(--dh-gray-2);
	font-weight: 500;
}
.section-tit-wrap > .sns-alert{
	font-size: 12px;
	color: var(--dh-color-orange-ac);
}

/* sns 피드 더보기 버튼 */
.main-section4 .load-feed {
	display: block;
	margin: 0 auto;
	padding: 10px 50px 10px 60px;
	background-color: #fff;
	border: 1px solid var(--dh-border-2);
	border-radius: 100px;
	color: var(--dh-gray-2);
	font-size: 12px;
	font-weight: 700;
	position: relative;
	margin-top: 40px;
}
.main-section4 .load-feed::before {
	content: '';
	display: inline-block;
	width: 24px;
	height: 24px;
	background: url(/images/2024_icons/double-down-arrow.png) no-repeat;
	position: absolute;
	left: 15px;
	top:  50%;
	transform: translateY(-50%);
} 

/* 메인화면 반응형 */
@media screen and (max-width:1215px){
	/* 배경 */
	.mainbg-left,
	.mainbg-right{
		display: none;
	}
	/* 배너 */
	.main-section1 {
		flex-direction: column;
		padding: 0 20px;
		padding-bottom: 20px !important;
		background-image: linear-gradient(257deg, rgba(238,252,255,1.00) 0%,rgba(230,251,244,1.00) 100%);
		background-position: center center;
	}
	.main-banner-sect {
		max-width: 100%;
		height: auto;
		border-radius: 20px;
		overflow: hidden;
	}
	.main-section1 .quick-service {
		width: 100%;
		margin-top: 20px;
		margin-left: 0;
	}
	.qs-item {
		width: calc(100% / 6 - 10px);
	}

	.main-section2,
	.main-section3,
	.main-section4 {
		padding: 0 20px;
	}
	.main-section2 .swiper-control {
		left: 125px !important;
	}

	.dh-main-counter {
		padding-bottom: 50px;
	}
	.dh-main-counter .main-section3 {
		flex-direction: column;
		align-items: baseline;
		max-width: 1300px;
		margin: 0px auto 40px;
	}
	.dh-counter {
		width: 100%;
	}

	.dh-main-counter .main-section3 .dh-main-info > p{
		width: 100%;
		margin-bottom: 30px;
	}
}
@media screen and (max-width:1052px){
	
	/* 공지사항 */
	.main-section2 {
		flex-direction: column;
		padding: 0 20px;
	}
	.main-section2 .dh-notice {
		margin-bottom: 18px;
	}
	.main-section2 .dh-notice-slider {
		width: 100%;
	}
	.main-section2 .swiper-control {
		left: 130px !important;
	}
	.section-tit-wrap > .sns-alert{
		display: none;
	}
}
@media screen and (max-width:767px){
	.dh-main-counter {
		margin-top: 40px !important;
	}
	.main-banner-sect,
	.main-section1 .quick-service {
        box-shadow: none;
    }
	.qs-item {
		/* flex-direction: row; */
        width: calc(100% / 3 - 10px);
		text-align: left;
    }
	.qs-item > p{
		margin-left: 10px;
    }
	.dh-main-counter {
		background-size: cover;
		background-position-x: right;
	}
	.dh-counter .counter-wrap{
		flex-wrap: wrap;
	}
	.dh-counter .counter-wrap .counter-cont {
		width: calc(100% / 2);
		margin-bottom: 20px;
	}

	.main-section2 .dh-notice {
        display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
    }
	.main-section2 .swiper-control .swiper-button-prev.sub-button-prev,
	.main-section2 .swiper-control .swiper-button-next.sub-button-next {
		display: none !important;
	}
	.main-section2 .dh-notice a.notice-more {
		margin-top: 0;
	}
	.dh-notice-slider .swiper-wrapper {
		height: 252px !important;
	}

	.main-section2 .dh-notice-slider .swiper-notice-content {
		border: none;
		border-bottom: 1px solid var(--dh-border-2) !important;
		border-radius: 0;
		padding: 10px 0;
	}
	.main-section2 .swiper-notice-content .notice-label {
		font-size: 16px;
	}
	.main-section2 .swiper-notice-content .notice-tit {
		width: calc(100% - 100px);
		height: auto;
		color: var(--dh-main-font-ac);
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 0;
		margin-right: 15px;
		word-break: break-all;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: inline-block;
	}
	.main-section2 .swiper-notice-content .notice-date {
		display: inline-block;
		padding-top: 0;
		border-top: none;
	}
}
@media screen and (max-width:550px){
	.qs-item {
        width: calc(100% / 2 - 10px);
		margin-bottom: 10px;
    }
	.qs-item > p{
		font-size: 12px;
    }
	.qs-item:nth-child(5),
	.qs-item:nth-child(6) {
		margin-bottom: 0px;
    }

	.main-section2 .dh-notice .notice-tit {
		font-size: 26px;
	}
	.dh-main-counter .main-section3 .dh-main-info > h2 {
		font-size: 22px;
		word-break: keep-all;
    }
	.section-tit-wrap .section-tit > h2 {
		font-size: 26px;
	}
	.section-tit-wrap .section-tit > span {
		font-size: 14px;
	}
	.section-tit-wrap .section-tit {
		display: block;
	}
	.dh-counter .counter-wrap .counter {
		font-size: 25px;
	}
	
}

/* quick menu */
.quick-menu-wrap {
	position: fixed;
	right: 30px;
	top: 130px;
}
.quick-menu-wrap > ul {
	background: #fff;
	border: 1px solid var(--dh-border-2);
	border-radius: 20px;
	padding: 10px 5px;
	box-shadow: 2px 4px 10px rgba(10, 10, 10, 0.2);;
}
.quick-menu-wrap > ul li {
	margin-bottom: 10px;
}
.quick-menu-wrap > ul li a,
.quick-menu-wrap > ul li img,
.quick-menu-wrap > ul li span {
	display: block;
	text-align: center;
	margin: 0 auto;
}

.quick-menu-wrap .top-btn > a {
	display: block;
	margin: 0 auto;
	margin-top: 18px;
	width: 60px;
	height: 60px;
	background: #d9d9d9 url(/images/2024_icons/top-icon.png) no-repeat center;
	border: 1px solid var(--dh-border-2);
	border-radius: 20px;
	box-shadow: 2px 4px 10px rgba(10, 10, 10, 0.2);;
}
@media screen and (max-width: 1510px) {
	.quick-menu-wrap {
		position: relative;
		right: auto;
		top: auto;
		max-width: 1300px;
		margin: 0 auto;
		margin-bottom: 30px !important;
	}
	.quick-menu-wrap > ul{
		display: flex;
		align-items: center;
		justify-content: space-around;
		box-shadow: none;
	}
	.quick-menu-wrap .top-btn {
		position: fixed;
		bottom: 30px;
		right: 25px;
		z-index: 8;
	}
	.quick-menu-wrap .top-btn > a{
		width: 45px;
		height: 45px;
		background-size: 20px;
	}
}
@media screen and (max-width: 1215px) {
    .quick-menu-wrap {
		margin: 0 20px;
	}
}



/* 온라인 교육 수강 */
.list-sect .list-info-about{
	border-top: 1px solid var(--dh-border-2);
	border-bottom: 1px solid var(--dh-border-2);
	background: #f8f8f8;
	margin-bottom: 20px;
	font-size: 14px;
	padding: 25px 10px;
}

.card-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/*justify-content: space-between;*/
}
.card-list .card-item{
	width: calc( 100% / 3 - 10px );
	margin-bottom: 15px;
	margin-right: 15px;
}
.card-list .card-item:nth-child(3n){
	margin-right: 0;
}
.card-item > a {
	display: block;
	border: 1px solid var(--dh-border-2);
	padding: 10px 10px 15px 10px;
	border-radius: 10px;
}
.card-item .card-thumb {
	position: relative;
    width: 100%;
    padding-top: 56.25%;
	border-radius: 10px;
    overflow: hidden;
}
.card-item .card-thumb > img {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-item .card-thumb .edu-status-before,
.card-item .card-thumb .edu-status-ongoing,
.card-item .card-thumb .edu-status-done{
	position: absolute;
	display: block;
	left: 5px;
	top: 5px;
	font-size: 14px;
	font-weight: 500;
	padding: 5px 12px;
	border-radius: 999px;
	color: #fff;
	z-index: 1;
}
.card-item .card-thumb .edu-status-before {
	background-image: linear-gradient(100deg, rgba(141,141,141,1.00) 0%,rgba(92,92,92,1.00) 100%);
}
.card-item .card-thumb .edu-status-ongoing {
	background-image: linear-gradient(281deg, rgba(29,118,206,1.00) 0%,rgba(134,95,245,1.00) 100%);
}
.card-item .card-thumb .edu-status-done {
	background-image: linear-gradient(276deg, rgba(13,150,41,1.00) 0%,rgba(167,211,96,1.00) 100%);
}
.card-item .card-tit {
	font-size: 15px;
	font-weight: 700;
	margin-top: 15px;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media screen and (max-width:1052px) {
	.card-list .card-item{
		width: calc( 100% / 2 - 10px );
		margin-right: 15px;
	}
	.card-list .card-item:nth-child(3n){
		margin-right: 15px;
	}
	.card-list .card-item:nth-child(2n){
		margin-right: 0;
	}
}
@media screen and (max-width:580px) {
	.card-list .card-item{
		width: 100%;
		margin-right: 0 !important;
	}
}

/* ========== */
/* 온라인 교육 수강 상세 테이블 */
.table-form > dl dt {
	width: 150px;
	background: #f5f5f5;
	padding: 15px 10px;
	font-size: 15px;
	font-weight: 700;
	line-height: 32px;
}
.table-form > dl dd {
	padding: 20px 10px;
	width: 100%;
	font-size: 14px;
}

/* 영상시청 player */
.player-box {
	position:relative; 
	padding-bottom:56.25%; 
	padding-top:30px; 
	height:0; 
	overflow:hidden;
}
.player-box iframe,
.player-box object,
.player-box embed {
	position:absolute; 
	top:0; 
	left:0; 
	width:100%; 
	height:100%;
}
.player-box{
	position: relative;
}
.player-wrap.no-login .player-box::after {
	content: '자원봉사자로 로그인해야 영상을 시청할 수 있습니다.';
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #000000de;
	color: white;
	font-size: 18px;
	text-align: center;
	vertical-align: middle;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
.progress-wrap {
	width: 100%;
	display: flex;
	align-items: center;
}
.progress-wrap #timer {
	text-align: right;
	font-size: 12px;
	margin-top: 4px;
}
.progress-cont {
	width: 100%;
	position: relative;
	padding: 10px 45px;
}
#progress-bar {
	height: 10px;
	background-color: #ddd;
	position: relative;
	cursor: pointer;
	border-radius: 50px;
}
#progress {
	height: 100%;
	background:linear-gradient(257deg, rgba(151,220,235,1.00) 0%,rgba(160,240,213,1.00) 100%);
	width: 0%;
	border-radius: 50px;
}
#progress-bar #current-time {
	position: absolute;
	left: -40px;
	top: 50%;
	transform: translateY(-50%);
}
#progress-bar #duration{
	position: absolute;
	right: -40px;
	top: 50%;
	transform: translateY(-50%);
}
.control-wrap{
	position: relative;
	margin-top: 12px;
}
.player-wrap.no-login .control-wrap{
	display: none;
}
.control-button{
	border: none;
	width: 40px;
	height: 40px;
	margin-right: 10px;
	border: 1px solid var(--dh-border-1);
	border-radius: 999px;
	padding: 5px;
	box-shadow:2px 2px 5px rgba(10, 10, 10, 0.2);
}
.control-button img {
	width: 30px;
	height: 30px;
	
}
.volun-progress {
	display: flex;
	min-width: 95px;
	border: 1px solid var(--dh-border-2);
	border-radius: 999px;
	padding: 10px 8px;
	font-size: 12px;
	align-items: center;
   	justify-content: center;
}
.volun-progress span{
	color: var(--dh-color-blue-ac);
	font-weight: 600;
	margin-left: 10px;
	vertical-align: baseline;
}

/* 버튼 스타일 - 아웃라인 버튼 */
.btn.btn-outline {
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	display: inline-block;
}
.line-orange {
	color: var(--dh-color-orange-ac);
	border: 1px solid var(--dh-color-orange-ac);
	background-color: #fff;
}
.line-blue {
	color: var(--dh-color-blue-ac);
	border: 1px solid var(--dh-color-blue-ac);
	background-color: #fff;
}
.line-orange:hover {
	color: #fff;
	background-color: var(--dh-color-orange-ac);
}
.line-blue:hover {
	color: #fff;
	background-color: var(--dh-color-blue-ac);
}
/* 온라인교육수강 평가 */
.quiz-head {
	font-size: 20px;
	font-weight: 700;
	color: var(--dh-main-font-ac);
	position: relative;
	padding-left: 30px;
	margin-bottom: 20px;
}
.quiz-head::before {
	content: '';
	display: inline-block;
	width: 26px;
	height: 26px;
	background: url(/images/2024_icons/check_circle.png) center;
	background-size: contain;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
.quiz-cont + .quiz-cont {
	margin-top: 30px;
}
.quiz-cont .quiz-q {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 15px;
	margin-left: 10px;
}
/* 평가란에 맞춰 input 조정 */
.quiz-cont .radio-wrap {
	margin-left: 20px;
	margin-bottom: 15px;
}
.quiz-cont .radio-wrap > label {
	display: block;
	position: relative;
	padding-left: 28px;
	margin-top: 10px;
}
.quiz-cont .radio-wrap > label > input {
	position: absolute;
	left: 0;
	top: 2px;
}
.quiz-cont .radio-wrap > label > span {
	color: var(--dh-gray-1);
	font-size: 14px;
}
.quiz-cont .radio-wrap > label.correct > span {
	color: var(--dh-color-blue-ac);
	font-size: 14px;
}
/* 해설란 */
.explain-box {
	border: 1px solid var(--dh-border-1);
	background: #fbfbfb;
	padding: 10px 20px;
	margin-bottom: 10px;
}
.explain-box .explain-head {
	font-size: 16px;
	font-weight: 700;
	color: var(--dh-color-orange-ac);
	margin-bottom: 5px;
}
.explain-box .wrong {
	color: #E80000;
	font-size: 13px;
	margin-bottom: 5px;
}
.explain-box .explain-body {
	color: var(--dh-gray-2);
	font-size: 14px;
}

.done-edu-save {
	text-align: center;
	padding-top: 20px;
	border-top: 1px solid var(--dh-border-2);
}
.done-edu-save > button {
	font-size: 15px;
	font-weight: 600;
}

@media screen and (max-width:580px){
	.quiz-cont .radio-wrap {
		margin-left: 10px;
	}
}

/* 검색박스 */
.searchbox-wrap {
	border-radius: 20px;
	border: 1px solid var(--dh-border-2);
	padding: 10px 15px;
	margin-bottom: 15px;
}
.searchbox-wrap dl {
	display: flex;
	align-items: center;
/* 	height: 40px; */
	min-height: 40px;
}
.searchbox-wrap dl dt {
	font-weight: 500;
	font-size: 15px;
	width: 12%;
	min-width: 100px;
}
.searchbox-wrap dl dd {
	width: 88%;
}
.searchbox-wrap dl dd > input,
.searchbox-wrap dl dd > select {
	width: 210px;
}
.searchbox-wrap dl dd > input[type="text"]{
	width: 400px;
}
.searchbox-wrap dl dd .check-wrap{
	margin-left: 0;
	display: flex;
	flex-wrap: wrap;
}
.searchbox-wrap dl dd .check-wrap .check-item{
	margin-right: 5px;
}
@media  screen and (max-width:890px) {
	.searchbox-wrap dl {
		flex-direction: column;
		align-items: baseline;
		height: auto;
		margin-bottom: 10px;
	}
	.searchbox-wrap dl dt {
		margin-bottom: 5px;
		width: 100%;
		min-width: 100%;
	}
	.searchbox-wrap dl dd {
		width: 100%;
	}
	.searchbox-wrap dl dd > input,
	.searchbox-wrap dl dd > select,
	.searchbox-wrap dl dd > input[type="text"] {
		width: 100%;
		margin: 2px 0px; 
	}
	.searchbox-wrap dl dd > input[type="date"] {
		width: calc(100% / 2 - 7px);
	}
}

/* 테이블 type B 반응형 */
.tablety-b .tn-label.ongoing {
	background-color: #2FB44A !important;
	width: 65px !important;
	font-size: 12px !important;
}
.tablety-b .tn-label.standby {
	background-color: #FFBF43 !important;
	width: 65px !important;
	font-size: 12px !important;
}
.tablety-b .tn-label.finished {
	background-color: var(--dh-gray-3) !important;
	width: 65px !important;
	font-size: 12px !important;
}
@media all and (max-width: 890px) {
	.tablety-b thead {
		border: none;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}

	.tablety-b th.li-tit {
		display: block;
		text-align: center !important;
		line-height: 50px;
		font-size: 15px;
		background: #F9F8F8;
		border-bottom: 1px solid var(--dh-border-2);
		font-weight: 700;
	}

	.tablety-be tr {
		border-top: 3px solid gray;
		border-bottom: 3px solid #ddd;
		display: block;
		margin-bottom: .625em;
	}

	.tablety-b td {
		border-bottom: 1px solid #ddd;
		display: flex;
		justify-content: space-between;
		height: auto !important;
	}

	.tablety-b td::before {
		content: attr(data-label); /*data-label을 가상요소 표출*/
		float: left;
		font-weight: bold;
		text-transform: uppercase;
	}

	.tablety-b td:last-child {
		border-bottom: 2px solid var(--dh-border-2);
	}

	.tablety-b .tn-label {
		margin: 0 !important;
	}
	.search-box-btn > button {
		display: block;
		width: 100%;
	}
}

/* 교육신청 상세 */
/* 상단 설명 */
.circle-info {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 10px;
	position: relative;
	padding-left: 25px;
}
.circle-info::before {
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	background: url(/images/2024_icons/circle.png) no-repeat center;
	position: absolute;
	left: 0;
	top: 0;
}

.simple-table{
	margin-bottom: 20px;
}
.simple-table > p {
	font-size: 14px;
	color: var(--dh-gray-2);
	margin-bottom: 5px;
}
.simple-table > table {
	width: 100%;
	border-top: 2px solid var(--dh-main-font-color);
}
.simple-table > table tr{
	border-bottom: 1px solid var(--dh-border-2);
}
.simple-table > table tr th {
	background-color: #f5f5f5;
	font-weight: 700;
}
.simple-table > table tr th,
.simple-table > table tr td {
	padding: 15px 10px;
}
.simple-table  .check-wrap {
	margin-top: 10px;
}
.simple-table  .check-wrap .check-item span {
	font-weight: 700;
	font-size: 14px;
}

@media screen and (max-width:890px) {
	.simple-table > table,
	.simple-table > table tbody,
	.simple-table > table tr,
	.simple-table > table tr th,
	.simple-table > table tr td {
		display: block;
		width: 100%;
	}
	.simple-table > table tr th{
		padding: 15px 5px;
	}
}

/* 20241203 sjk ckeditor 로 작성된 글 bold 처리 공통선언*/
/*
동행소식-공지사항 상세
동행소식-묻고 답하기 상세
동행소식-자주하는 질문 상세
동행소식-동행스케치(숨김) 상세
동행소식-자료실(숨김) 상세
기획봉사-서울청년기획봉사 상세, 수정
*/
.view-body strong{
	font-weight:bold;
}
/*
멘토링봉사-활동 신청 상세
동행소식-동행스케치(숨김) 상세
기획봉사-서울청년기획봉사 공고 상세
*/
.edit-form dl dd strong{
	font-weight:bold;
}
/*
교육-오프라인 교육 신청 상세
교육-온라인 교육 신청 상세
동행소식 - 이벤트 상세
기획봉사-메타러닝 상세
*/
.table-sect .table-form   > dl dd>strong{
	font-weight:bold;
}
/*
 	기획봉사-서울청년기획봉사 상세, 수정
*/
.detail-view-body > strong, .pop-view-body > strong{
	font-weight:bold;
}