/*------------------------------------------------------------------------------------------------------
한국화가 장우성
---------------------------------------------------------------------------------------------------------*/
.jwsinfo_top {bottom: 0; right: 0;}
    @media (max-width: 1028px) {
        .jwsinfo_top {width: 100%; margin-top: 2rem; position: relative;}
    }
.jwsinfo_top p:first-child span {border-bottom: 1px solid #282828;}
.jwsinfo_top h3 span:before {
    content:'';
    position:absolute; top:-5px; left:50%;
    width:5px; height:5px; background-color:#f05133; border-radius:5px;
    transform:translateX(-50%);
}

@media all and (min-width: 768px) and (max-width: 1200px) {
    .jwsinfo_wrap div:first-child {order: 2;}
    .jwsinfo_wrap div:last-child {order: 1;}
}

/*------------------------------------------------------------------------------------------------------
약력
---------------------------------------------------------------------------------------------------------*/
.resume_cmd9 {z-index: 0;}

/*------------------------------------------------------------------------------------------------------
월전미술문화재단 연혁
---------------------------------------------------------------------------------------------------------*/
.timeline {z-index: 0;}

/*------------------------------------------------------------------------------------------------------
작품세계
---------------------------------------------------------------------------------------------------------*/
.dtbg {
    position: relative; /* 가상 요소를 위치시키기 위해 필요 */
    height: 300px;
    overflow: hidden; /* 가상 요소가 부모 요소를 넘어가지 않도록 */
    display: flex; /* 자식 요소(dt)를 정렬하기 위해 flexbox 사용 */
    justify-content: center; /* dt 요소를 가로 중앙 정렬 */
    align-items: center; /* dt 요소를 세로 중앙 정렬 */
}

.dtbg::before {
    content: ""; /* 가상 요소에 필수 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1; /* 배경 이미지 투명도 조절 (0.0은 완전 투명, 1.0은 완전 불투명) */
    z-index: -1; /* 내용을 가리지 않도록 가장 뒤로 보냄 */
}

.dtbg dt {
    position: relative; /* 디자인 선 가상 요소를 위치시키기 위해 필요 */
    z-index: 1; /* 배경 이미지 가상 요소 위에 나타나도록 */
    color: #333; /* '제목' 텍스트 색상 (원하는 색상으로 변경) */
    font-size: 2.5em; /* '제목' 텍스트 크기 (원하는 크기로 변경) */
    font-weight: bold; /* '제목' 텍스트 굵기 (원하는 굵기로 변경) */
    text-align: center; /* 혹시 모를 경우를 대비한 텍스트 중앙 정렬 */
    /* dt 요소 자체에 패딩이나 마진을 주지 않는 것이 좋습니다. */
}

.dtbg dt::before {
    content: "";
    position: absolute;
    top: -50px; /* '제목' 위로 선을 올리기 위해 음수 값 사용 (선 높이 조절) */
    left: 50%; /* 가로 중앙에 위치 */
    transform: translateX(-50%); /* 정확한 가로 중앙 정렬을 위해 */
    width: 2px; /* 선의 두께 */
    height: 40px; /* 선의 길이 */
    background-color: #000; /* 선의 색상 (원하는 색상으로 변경) */
}

.dtbg dd {
    position: relative; /* '내용' 텍스트가 배경 이미지 가상 요소 위에 나타나도록 */
    z-index: 1; /* 배경 이미지 가상 요소 위에 나타나도록 */
    /* dd 요소에 필요한 스타일 추가 */
    margin-left: 20px; /* 필요에 따라 dt와의 간격 조절 */
    /* 기타 '내용' 텍스트 스타일 */
}

.dtbg_1::before {background: url("../jws/images/world_1.jpg") center center / cover no-repeat;}/*인물*//* 여기에 투명도를 적용할 배경 이미지 삽입 */
.dtbg_2::before {background: url("../jws/images/world_2.jpg") center center / cover no-repeat;}/*화조영모*/
.dtbg_3::before {background: url("../jws/images/world_3.jpg") center center / cover no-repeat;}/*산수풍경*/
.dtbg_4::before {background: url("../jws/images/world_4.jpg") center center / cover no-repeat;}/*반추상*/
.dtbg_5::before {background: url("../jws/images/world_5.jpg") center center / cover no-repeat;}/*소묘*/
.dtbg_6::before {background: url("../jws/images/world_6.jpg") center center / cover no-repeat;}/*서예*/

.world_dt {
    position: relative; /* 가상 요소의 위치 기준점을 설정 */
    padding-top: 10px; /* 선과 텍스트 사이의 간격 확보 */
    /* text-align: center; 제목 텍스트를 가운데 정렬 (선택 사항) */
}
.world_dt::before {
    /* content: ""; 가상 요소의 내용 (필수) */
    /* position: absolute; 절대 위치를 사용하여 제목 위에 배치 */
    /* top: 0; 제목의 맨 위로 이동 */
    /* left: 50%; 왼쪽에서 50% 지점으로 이동 */
    /* transform: translateX(-50%); 정확히 가운데 정렬 */
    /* width: 80%; 선의 너비 (조절 가능) */
    /* height: 1px; 선의 두께 */
    /* background-color: #72777d; 선의 색상 */
}
.world_dt::before {
    content: "";
    position: absolute;
    top: 0; /* 제목 맨 위로 이동 */
    left: 0; /* 왼쪽 끝에 붙임 */
    right: 0; /* 오른쪽 끝에 붙임 */
    margin: auto; /* 자동으로 좌우 여백을 균등하게 배분하여 중앙 정렬 */
    width: 55px; /* 선의 고정된 너비 */
    height: 1px;
    background-color: #72777d; /* 연한 회색 */
}
.world_wrap dd p {text-align: justify;}
.world_more {border-color: #212529 !important; color: #000;}
.world_more:hover {background-color: #212529; color: #fff;}

/*------------------------------------------------------------------------------------------------------
재단소개
---------------------------------------------------------------------------------------------------------*/
.foundinfo_top {width: 55%; position: absolute; bottom: 0; left: 0; background: rgba(255, 255, 255, .7);}
    @media (max-width: 1028px) {
        .foundinfo_top {width: 100%; margin-top: 2rem; position: relative;}
    }
.foundinfo_top p:first-child span {border-bottom: 1px solid #282828;}
.foundinfo_top h3 span:before {
    content:'';
    position:absolute; top:-5px; left:50%;
    width:5px; height:5px; background-color:#f05133; border-radius:5px;
    transform:translateX(-50%);
}

@media (min-width: 320px) and (max-width: 1800px) {
    .foundinfo_wrap br {display: none;}/* <br> 태그를 숨겨서 줄바꿈 방지 */
}

/*
@media all and (min-width: 768px) and (max-width: 1200px) {
    .foundinfo_wrap div:first-child {order: 2;}
    .foundinfo_wrap div:last-child {order: 1;}
}*/

/*------------------------------------------------------------------------------------------------------
재단연혁
---------------------------------------------------------------------------------------------------------*/
.history_wrap .timeline__item {padding-top: 0; padding-bottom: 0;}

@media all and (min-width: 768px) and (max-width: 1024px) {
    .history_wrap .col-md-4, .history_wrap .col-md-8 {width: 100%;}
}

.history_wrap .timeline__content {padding: 0.8rem 1.25rem; border: none; border-bottom: 1px solid #ccc!important; border-radius:1px!important;}
.history_wrap .timeline__content h3 {font-size: 1.125rem; font-weight: 900;}
/*.history_wrap .timeline__content h3::before {
    content: "\f192";
	margin-right:10px;
	font-family: "Font Awesome 5 Free"; color: #c4c4c4;
}*/
.timeline__content p {font-size: 1rem!important;}

.history_wrap .timeline__content:after,
.history_wrap .timeline__content:before {
    content:none;
}
.history_wrap .timeline__item:after {border-color: #1e3050;}

/*------------------------------------------------------------------------------------------------------
공간
---------------------------------------------------------------------------------------------------------*/
/*.map_wrap > .branch_guide {background: none;}
	@media all and (min-width: 320px) and (max-width: 769px) {
		.map_wrap > .branch_guide {
			display:-webkit-flex;
			display:-moz-flex;
			display:-o-flex;
			display:-ms-flex;
			display:flex;
			flex-direction:row;
			flex-wrap:wrap;
			justify-content:space-between;
			align-items:flex-start;
		}
	}
.map_wrap > .branch_guide > div {width: 202px; height: 202px; padding-top: 3rem;}
	@media all and (min-width: 320px) and (max-width: 769px) {
		.map_wrap > .license_top > div {
			width: auto; height: auto; margin: .5rem; padding: 1rem;
			border-radius: 1rem; border: 2px solid #ffd200;
		}
	}*/

	/*-----------------------
	미술관
	-----------------------*/

    /*-----------------------
	월전관
	-----------------------*/

	/*-----------------------
	탭
	-----------------------*/
/* 탭 전체 스타일 */
.tabs {width: 100%;margin: 0 auto;}

/* 탭 스타일 */
.tab_item {
float: left; display: block;
width: calc(100%/2); height: 50px; text-align: center; align-content: center;
background-color: #f8f8f8; border-bottom: 3px solid #333;
font-size: 15px; color: #333333; font-weight: bold;
transition: all 0.2s ease;
cursor:pointer;
}
.tab_item:hover {
opacity: 0.75;
}

/* 라디오 버튼 UI삭제*/
input[name="tab_item"] {
display: none;
}

/* 탭 컨텐츠 스타일 */
.tab_content {
display: none;
padding: 40px 0;
clear: both;
overflow: hidden;
}


/* 선택 된 탭 콘텐츠를 표시 */
#tabcon3:checked ~ #tabcon3_content,
#tabcon2:checked ~ #tabcon2_content,
#tabcon1:checked ~ #tabcon1_content,
#tb2023:checked ~ #tb2023_content,
#design:checked ~ #design_content,
#desi:checked ~ #desi_content {
display: block;
}

/* 선택된 탭 스타일 */
.tabs input:checked + .tab_item {
background-color: #333333;
color: #fff;
}

	/*
	모달이미지
	---------------------------------------------*/
.grayConBox dd div.license_thumb_wrap {
	display:-webkit-flex;
	display:-moz-flex;
	display:-o-flex;
	display:-ms-flex;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	flex-wrap:wrap;
	align-items:center;
	width:100%; margin:0 auto; padding:0; border:none;
}
.grayConBox dd div.license_thumb_wrap > div.md-trigger {width:150px; margin:0 5px 5px 0; padding:0; border:1px solid #ccc; cursor:pointer;}

/*------------------------------------------------------------------------------------------------------
미술관연혁
---------------------------------------------------------------------------------------------------------*/
.introhis_top {background: url(../intro/images/history_bg.jpg); top top no-repeat; background-attachment: fixed;}

.introhistory_wrap .timeline__content h3 {color: #f79862;}
.introhistory_wrap .timeline__content h3::before {
    content: "";
	margin-right:0;
}
/*.introhistory_wrap .timeline__content dt::before {
    content: "\f192";
	margin-right:7px;
	font-family: "Font Awesome 5 Free"; color: #c4c4c4;
}*/

/*------------------------------------------------------------------------------------------------------
오시는길
---------------------------------------------------------------------------------------------------------*/
.list_ol {
    counter-reset: item;
}
.list_ol li {
    position: relative;
    padding-left: 30px;
}
.list_ol li:before {
    content: counter(item);
    counter-increment: item; margin-right: 15px;
    position: absolute; left: 0; top: 0;
    /*width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%;
    background-color: #ffde00;
    color: #1e3050;*/ font-weight: bold;
}

/*------------------------------------------------------------------------------------------------------
관람안내
---------------------------------------------------------------------------------------------------------*/
.view_ul li::before {
    content: "\f192";
    margin-right: 10px;
    font-family: "Font Awesome 5 Free";
}

/*------------------------------------------------------------------------------------------------------
사업소개
---------------------------------------------------------------------------------------------------------*/
.biz_dl dt::before {
    content: "●";
    position: absolute; top: 10px;
    font-size: 4px;
}
.biz_box {border-radius: 3rem}

/*------------------------------------------------------------------------------------------------------
MI
---------------------------------------------------------------------------------------------------------*/
.mi_wrap section > div {min-height: 360px; transition: background-color 0.3s ease-in-out;}
.mi_wrap section > div:hover {
    background-color: #fbfbfb; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s ease-in-out;
}
.mi_wrap a:hover {background-color: #ccc;}

/*------------------------------------------------------------------------------------------------------
전시게시판
---------------------------------------------------------------------------------------------------------*/
.img_thumb {
	padding: 0!important;
	background-color: #fff!important;
	border: 0px solid #fff!important;
	border-radius: 0!important;
	max-width: 200px!important;
	height: auto!important;
  }

  .btn-white {
	color: #000;
	background-color: #fff;
	border-color: #fff;
  }
  .btn-white:hover {
	color: #000;
	background-color: #fff;
	border-color: #fff;
  }
  .btn-check:focus + .btn-white, .btn-white:focus {
	color: #000;
	background-color: #fff;
	border-color: #fff;
	box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.5);
  }
  .btn-check:checked + .btn-white, .btn-check:active + .btn-white, .btn-white:active, .btn-white.active, .show > .btn-white.dropdown-toggle {
	color: #000;
	background-color: #fff;
	border-color: #fff;
  }
  .btn-check:checked + .btn-white:focus, .btn-check:active + .btn-white:focus, .btn-white:active:focus, .btn-white.active:focus, .show > .btn-white.dropdown-toggle:focus {
	box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.5);
  }
  .btn-white:disabled, .btn-white.disabled {
	color: #000;
	background-color: #fff;
	border-color: #fff;
  }

.display_wrap .img-thumbnail {padding: 0!important; border: none!important; border-radius: 0!important;}

@media all and (min-width: 1200px) {
	.display_wrap h3 {margin-left: 5rem; padding-left: 1rem;}
	.display_con {margin: 3rem 5rem;}
	.pro_con {margin: 0 5rem;}
    .display_con dt {width: 12%!important;}
	.display_con .col-9 {width:  83.33333333%!important;}
}

/*
@media all and (min-width: 320px) and (max-width: 767px) {
    .display_con dt {width: 100%!important; border: 1px solid #ccc;}
	.display_con dd {width: 100%!important; border: 1px solid #ccc;}
}
@media all and (min-width: 768px) and (max-width: 1399px) {
    .display_con dt {width: 9.7%!important;}
}
@media all and (min-width: 768px) and (max-width: 992px) {
    .display_wrap {padding-left: 7rem!important;}
}
*/

/*------------------------------------------------------------------------------------------------------
교육행사
---------------------------------------------------------------------------------------------------------*/
.pro_thumb img {text-align: left;}
@media all and (min-width: 1200px) {
	.pro_thumb img {text-align: center;}
}

/*------------------------------------------------------------------------------------------------------
소장품
---------------------------------------------------------------------------------------------------------*/
.coll_cate {min-width: 200px;}
.coll_cate2 {min-width: 100px;}







/*------------------------------------------------------------------------------------------------------
이하 다른곳-------------연혁
---------------------------------------------------------------------------------------------------------*/
.history_Wrap .timeline__item {padding-top: 0; padding-bottom: 0;}
.history_Wrap .timeline__content {padding: 0.8rem 1.25rem; border: none; border-bottom: 1px solid #ccc!important; border-radius:1px!important;}
.history_Wrap .timeline__content h3 {font-family: 'Noto Serif KR', serif; color: #1875d8;}
.history_Wrap .timeline__content p {position: relative; margin-top: 0.7rem; padding-left: 20px;}
.history_Wrap .timeline__content p i {
    position: absolute; left: 0; top: 6px;
    color: #ffde00;
}

.history_Wrap .timeline__content:after,
.history_Wrap .timeline__content:before {
    content:none;
}
.history_Wrap .timeline__item:after {border-color: #1875d8;}

	/*-----------------------
	인트로
	-----------------------*/
.history_intro p {position: relative; margin-bottom: 0.5rem; padding-left: 20px;}
.history_intro i {
    margin-right: 10px;
    position: absolute; left: 0; top: 6px;
    color: #ffde00;
}

/*------------------------------------------------------------------------------------------------------
조직도
---------------------------------------------------------------------------------------------------------*/
.organ_wrap th, .organ_wrap td {text-align: left;}
.organ_wrap th::before {
	content:"\f192";
	font-family: "Font Awesome 5 Free"; font-weight: 900; color: #1875d8; margin-right: 7px;
}
.organ_wrap th {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity));
    color: #1875d8;
}