/* 공통 */
body {background: url(images/sub/contents_bg.png) no-repeat center top / cover;}
/* 프린트설정 */
@page {size: 21cm 29.7cm; margin: 15px;} /* a4사이즈 고정 */
@media print{
	#header, #footer, .sub_tit_wrap, .snb_wrap {display: none;}
    .sub_contents_wrap {left: -150px; width: 1000px;}
    * {-webkit-print-color-adjust: exact !important;}   /* 백그라운드 무조건 보이기 Chrome, Safari 6 – 15.3, Edge */
}
.sub_contents_wrap {position: relative; margin-top: 35px;}
.sub_contents_wrap > article {position: relative; top: 0; left: 300px; max-width: 1000px;}
/* 상단-타이틀영역*/
.content_tit {position: relative; padding-bottom: 10px; margin-bottom: 60px;}
.content_tit h3::after {content: ""; display: inline-block; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #6c6658; }
.content_tit h3 {font-size: 2.2rem; color: #5c5039;}
.content_tit i {font-size: 1.8rem; color: #5c5039;}
.direction {align-items: end;}
.direction li {font-size: 1.4rem; color: #5c5039;}
.direction li:nth-child(1)::after, .direction li:nth-child(2)::after {content: ""; width: 8px; height: 10px; display: inline-block; margin: 0 10px; background: url(images/sub/direc_arrow.png)no-repeat center / contain;}
.direction li:nth-child(3) {font-weight: 800;}
.direction li:nth-child(3):after {content: ""; width: 1px; height: 14px; margin: 0 15px; display: inline-block; background: #5c5039;}
/* 컨텐츠영역 */
h2 {font-size: 3.4rem; color: #693220; text-align: center; margin-bottom: 40px;}
p {font-size: 1.4rem; color: #333; font-weight: 500; text-align: center;}
.txt_box p {color: #5c5039;}
.bott_bg {width: 100%; height: 290px; background: url(images/sub/bg.png)no-repeat #f8eedd center right / cover; background-blend-mode: multiply;}
/* 서브01 - 관람안내 */
/* content01 - 관람안내 */
.sub01_contents .contents01 .txt_box {margin-bottom: 40px;}
.sub01_contents .contents01 .img_box {height: 329px; background: url(images/sub/sub01_con01.png)no-repeat center / cover; margin-bottom: 30px; box-shadow: 3px 3px 5px rgba(0, 0, 0, .1); border-radius: 15px;}
.sub01_contents .contents01 p {padding: 0 100px;}
/* content02 */
.sub01_contents .contents02 {text-align: center; margin-top: 50px;} 
.sub01_contents .contents02 .info_box {width: 316px; background: #fbf3e1; border: 1px solid #dbcfb5; border-radius: 26px; padding: 25px; line-height: 25px; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);}
.sub01_contents .contents02 .info_box span {color: #666; font-weight: 500;}
.sub01_contents .contents02 .info_box .caution {line-height: 20px;}
.sub01_contents .contents02 .img_box {height: 160px; overflow: hidden; border-radius: 10px; margin-bottom: 10px;}
.sub01_contents .contents02 .img01 {width: 100%; height: 100%; background: url(images/sub/sub01_con02.png)no-repeat center top / cover; }
.sub01_contents .contents02 .img02 {width: 100%; height: 100%; background: url(images/sub/sub01_con03.png)no-repeat center bottom / cover; }
.sub01_contents .contents02 .img03 {width: 100%; height: 100%; background: url(images/sub/sub01_con04.png)no-repeat center top / cover; }
.sub01_contents .contents02 h3 {font-size: 1.8rem; color: #683120; font-weight: 700; margin: 30px 0 20px 0;}
.sub01_contents .contents02 .info {margin-bottom: 10px;}
.sub01_contents .contents02 .info p {font-weight: 600;}
.sub01_contents .contents02 .caution {font-size: 1.4rem; color: #e32d2d; align-items: end;}
.sub01_contents .contents02 .caution:first-child {font-weight: 400;}
.sub01_contents .contents02 .caution i {font-size: 1.4rem; margin-right: 5px; color: #e32d2d;}
/* content03 - 관람시 유의사항 */
.sub01_contents .contents03 .img_box {position: relative;}
.sub01_contents .contents03 .img_box .img01 {width: 100%; height: 331px; background: url(images/sub/sub01_con05.png)no-repeat right center / cover; box-shadow: 3px 3px 5px rgba(0, 0, 0, .1); border-radius: 15px;}
.sub01_contents .contents03 .img_box h2 {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; line-height: 50px; font-size: 3.4rem;}
.sub01_contents .contents03 .illust_box {margin: 40px 0;}
.sub01_contents .contents03 .illust_box p {padding: 20px;}
.sub01_contents .contents03 .illust_box li {width: 25%; padding: 0 20px; position: relative; text-align: center;}
.sub01_contents .contents03 .illust_box li::after {content: ""; display: inline-block; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: #b8a58e;}
.sub01_contents .contents03 .illust_box li:first-child:after {display: none;}
.sub01_contents .contents03 .illust_box .illust01 {width: 145px; height: 179px; background: url(images/sub/sub01_illust01.png)no-repeat center / contain;}
.sub01_contents .contents03 .illust_box .illust02 {width: 145px; height: 179px; background: url(images/sub/sub01_illust02.png)no-repeat center / contain;}
.sub01_contents .contents03 .illust_box .illust03 {width: 145px; height: 179px; background: url(images/sub/sub01_illust03.png)no-repeat center / contain;}
.sub01_contents .contents03 .illust_box .illust04 {width: 145px; height: 170px; background: url(images/sub/sub01_illust04.png)no-repeat center / contain;}

/* 서브02 - 시설안내 */
/* contents01 - 위치 및 상세보기  */
.sub02_contents .contents01 .location_box_wrap {display: flex; justify-content: end;}
.sub02_contents .contents01 .location_box {width: 501px; height: 321px; background: url(images/sub/sub02_loca.png)no-repeat center / contain; position: relative; z-index: 1; right: 0;}
.sub02_contents .contents01 .location_box::before {content: ""; display: inline-block; width: 222px; height: 209px; background: url(images/sub/sub02_loca_deco.png)no-repeat center / contain; position: absolute; left: -220px; top: 50px;}
/* .sub02_contents .contents01 .location_box::after {content: ""; display: inline-block; width: 222px; height: 209px; background: url(images/sub/sub02_loca_deco.png)no-repeat center / 90%; position: absolute; left: -210px; top: 20px; animation: sub2tree 5s infinite linear; transform-origin: right bottom;} */
@keyframes sub2tree {
    0% {top: 40px; opacity: .2;}
    50% {transform: rotate(-8deg) translateY(15px); opacity: 1;}
    100% {opacity: 0;}
}
.sub02_contents .contents01 .location {width: 450px; height: 110px; display: flex; flex-wrap: wrap; position: absolute; left: 53%; top: 52%; transform: translate(-50%,-50%);}
.sub02_contents .contents01 .location li {width: 33.333%; cursor: pointer;}
.sub02_contents .contents01 .location li a {font-size: 1.4rem; color: #5c5039;}
.sub02_contents .contents01 .location li:hover a {font-weight: 800;}
.location .num {font-size: 1.2rem; color: #5c5039; background: #b8a58e; width: 22px; height: 22px; border-radius: 100%; text-align: center; align-content: center;}
.sub02_contents .contents01 h4 {font-size: 1.4rem; width: 100%; position: relative; top: 20px; text-align: center; padding-right: 20px;}
.sub02_contents .contents01 h4::after {content: ""; width: 27px; height: 28px; display: inline-block; background: url(images/sub/sub02_click.png) no-repeat center / cover; margin-left: 10px;}
.sub02_contents .contents01 .map {width: 100%; height: 694px; margin: 20px 0 40px 0; cursor: pointer; transition: .4s; background: url(images/sub/sub02_map.png)no-repeat #fffcf6 center bottom/ contain; border-radius: 10px; box-shadow: 3px 3px 5px rgba(0, 0, 0, .1);}
.sub02_contents .contents01 .map:hover {box-shadow: 3px 3px 3px rgba(0, 0, 0, .2); transform: scale(1.02);}
.sub02_contents .contents01 .num_btn {border: 0; background: #b8a58e; width: 24px; height: 24px; border-radius: 100%; color: #5c5039; font-size: 1.2rem; font-weight: 600; text-align: center; padding-bottom: 2px;}
/* 상세보기 */
.sub02_contents .contents02 > div {border-top: 1px solid #6c6658; padding: 20px 0;}
.sub02_contents .contents02 > div:last-child {border-bottom: 1px solid #6c6658;}
.sub02_contents .contents02 ul {position: relative; height: 340px; align-items: center; padding: 0 30px; }
.sub02_contents .contents02 ul::before {content: ""; width: 100%; height: 1px; position: absolute; top: 0; background: #5c5039;}
.sub02_contents .contents02 ul:last-child:after {content: ""; width: 100%; height: 1px; position: absolute; bottom: 0; background: #5c5039;}
.sub02_contents .contents02 .txt_box {width: 70%; position: relative; text-align: justify; height: 75%;}
.sub02_contents .contents02 .txt_box::after {content: ""; display: inline-block; position: absolute; top: -50px; right: 0; width: 100%; height: 314px; background: url(images/sub/sub02_emblem.png)no-repeat #f9efe0 right 20px / contain; background-blend-mode: soft-light; z-index: -1;}
.sub02_contents .contents02 .txt_box li {font-size: 1.4rem; color: #5c5039; line-height: 30px;}
.sub02_contents .contents02 .txt_box h2 {font-size: 2.8rem; text-align: start; margin: 20px 0;}
.sub02_contents .contents02 .img_box {position: relative; cursor: pointer;}
.sub02_contents .contents02 .img_box a {box-shadow: 3px 3px 5px rgba(0, 0, 0, .2); transition: .4s; border-radius: 10px;}
.sub02_contents .contents02 .img_box a::before {content: ""; width: 100%; height: 99%; position: absolute; display: inline-block; background: #5c5039; opacity: 0;  transition: .4s;}
.sub02_contents .contents02 .img_box a::after {content: ""; width: 125px; height: 59px; position: absolute; z-index: 1; left: 50%; top: 60%; transform: translate(-50%,-50%); background: url(images/sub/sub02_veiw_deco.png)no-repeat center / contain; opacity: 0; transition: .4s;}
.sub02_contents .contents02 .img_box a:hover {box-shadow: 3px 3px 5px rgba(0, 0, 0, .5); transform: scale(1.01); overflow: hidden;}
.sub02_contents .contents02 .img_box a:hover::before {content: ""; opacity: .6;}
.sub02_contents .contents02 .img_box a:hover::after {content: ""; opacity: 1; top: 50%;}
#loc01 .img_box a {width: 338px; height: 255px; background: url(images/sub/sub02_con1.png)no-repeat center;}
#loc02 .img_box a {width: 338px; height: 255px; background: url(images/sub/sub02_con2.png)no-repeat center;}
#loc03 .img_box a {width: 338px; height: 255px; background: url(images/sub/sub02_con3.png)no-repeat center;}
#loc04 .img_box a {width: 338px; height: 255px; background: url(images/sub/sub02_con4.png)no-repeat center;}
#loc05 .img_box a {width: 338px; height: 255px; background: url(images/sub/sub02_con5.png)no-repeat center;}
#loc06 .img_box a {width: 338px; height: 255px; background: url(images/sub/sub02_con6.png)no-repeat center;}
#loc07 .img_box a {width: 338px; height: 255px; background: url(images/sub/sub02_con7.png)no-repeat center;}
#loc08 .img_box a {width: 338px; height: 255px; background: url(images/sub/sub02_con8.png)no-repeat center;}
#loc02 {flex-direction: row-reverse;}
#loc02 .txt_box::after {background-position: left 20px;}
#loc04 {flex-direction: row-reverse;}
#loc04 .txt_box::after {background-position: left 20px;}
#loc06 {flex-direction: row-reverse;}
#loc06 .txt_box::after {background-position: left 20px;}
#loc08 {flex-direction: row-reverse;}
#loc08 .txt_box::after {background-position: left 20px;}

/* 서브03 - 상설전시 */
/* 제목 (고정) */
.sub03_contents .txt_box {margin-bottom: 60px;}
.sub03_contents .txt_box p {font-size: 1.8rem; text-align: center;}
/* 버튼(고정) */
.room_tit .room_btn {width: 140px; height: 140px; font-size: 1.6rem; color: #635842; font-weight: 700; border-radius: 10px; outline: 1px solid #dbcfb5; border: 0; background: #fffcf6; box-shadow: 3px 3px 5px rgba(0, 0, 0, .1); transition: .4s;}
.room_tit .room_btn.on {outline: 1px solid #cfc4ab; background: #d6cab0; color: #3d3525; box-shadow: 5px 5px 10px rgba(0, 0, 0, .2); border-radius: 100%;}
.room_tit .room_btn:hover {outline: 1px solid #cfc4ab; background: #d6cab0; color: #3d3525; box-shadow: 5px 5px 10px rgba(0, 0, 0, .2); border-radius: 100%;}
.room_tit .room_btn::before {margin-bottom: 10px;}
.room_tit .room_btn:first-child::before {content: ""; background: url(images/sub/sub03_room_icon01.png)no-repeat center / contain; display: block;; height: 48px;}
.room_tit .room_btn:nth-child(2)::before {content: ""; background: url(images/sub/sub03_room_icon02.png)no-repeat center / contain; display: block;  height: 48px;}
.room_tit .room_btn:nth-child(3)::before {content: ""; background: url(images/sub/sub03_room_icon03.png)no-repeat center / contain; display: block;  height: 48px;}
.room_tit .room_btn:nth-child(4)::before {content: ""; background: url(images/sub/sub03_room_icon04.png)no-repeat center / contain; display: block;  height: 48px;}
.room_tit .room_btn:last-child:before {content: ""; background: url(images/sub/sub03_room_icon05.png)no-repeat center / contain; display: block; height: 48px;}
/* 맵 - 고정 */
.room_info_wrap > div {display: none;}
.room_info_wrap > div:first-child {display: block;}
.map {margin-top: 60px; position: relative;}
.map::before {content: ""; position: absolute; z-index: 1; top: -60px; left: -30px; width: 60px; height: 110px; display: inline-block; background: url(images/main_sec02/flower1.png)no-repeat 0 / contain; 
animation: flower 7s linear infinite;}
.map::after {content: ""; position: absolute; bottom: -50px; right: -20px; width: 40px; height: 110px; display: inline-block; background: url(images/main_sec02/flower1.png)no-repeat 0/ contain; 
animation: flower 5s linear infinite;}
@keyframes flower {
    0% {transform: rotate(0);}
    100% {transform: rotate(180deg);}
}
/* 맵 - left (고정) */
.map .map_left {width: 50%; height: 558px; position: relative;  border: 1px solid #dbcfb5; border-radius: 10px;}
.map_location li {display: none; animation: locaNum .7s infinite linear;}
@keyframes locaNum {
    0% {}
    100% {background: rgba(194, 13, 37, 0.747);}
}
/* 맵 - right (고정) */
.map .map_right {width: 50%; height: 558px; background: #fffcf6; border: 1px solid #dbcfb5; border-radius: 10px;}
.sub03_contents .location_box {width: 441px; height: 245px; position: relative; background: url(images/sub/sub02_loca.png)no-repeat center / cover; left: 50%; transform: translate(-50%,0); margin: 20px 0;}
.sub03_contents .location_box h4 {font-size: 1.4rem; text-align: center;}
.sub03_contents .location_box h4::after {content: ""; display: inline-block; width: 27px; height: 28px; background: url(images/sub/sub02_click.png) no-repeat center; margin-right: 10px;}
.location {width: 340px; height: 110px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-45%); display: flex; flex-wrap: wrap; }
.location li {width: 50%; cursor: pointer; font-size: 1.4rem; color: #5c5039;}
.location li.on {font-weight: 800;}
.location li:hover {font-weight: 800;}
.map_right .num5 {width: 22px; height: 22px; background: url(images/sub/sub03_map_icon01.png)no-repeat center; transform: translateY(5px);}
.map_right .num6 {width: 22px; height: 22px; background: url(images/sub/sub03_map_icon02.png)no-repeat center; transform: translateY(5px);}
.video {text-align: center;}
.video iframe {border-radius: 10px; outline: 6px solid #dbcfb5;}
.info_txt {border-bottom: 1px solid #6c6658; padding-bottom: 40px;}
.info_txt li {display: none;}
.info_txt li:first-child {display: block;}
.info_txt h3 {font-size: 2.0rem; color: #8b806c; font-weight: 700; margin: 40px 0 20px 0;}
.info_txt p {font-size: 1.6rem; color: #5c5039; text-align: justify; line-height: 30px;}
/* 전시품(고정) */
.sub03_contents .exhibits_box {position: relative;}
.sub03_contents .exhibits_more {position: absolute; right: 0; bottom: -100px; transform: translate(0,-50%); width: 55px; height: 55px; background-color: #fcfcfc; border-radius: 100%; box-shadow: 3px 3px 5px rgba(0, 0, 0, .1);}
.sub03_contents .exhibits_more:hover {background-color: #f7eddc;}
.sub03_contents .exhibits_more p {position: absolute; left: -100px; top: 50%; transform: translateY(-50%); font-size: 1.6rem;}
.sub03_contents .exhibits_more .more_btn {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 47px; height: 47px; background: url(images/sub/sub03_exhi_more.png)no-repeat center; }
.sub03_contents .exhibits {overflow-x: auto; padding-bottom: 40px;}
.sub03_contents .exhibits::-webkit-scrollbar {height: 20px;}
.sub03_contents .exhibits::-webkit-scrollbar-thumb {background: #e0d6c0; border-radius: 10px; }
.sub03_contents .exhibits::-webkit-scrollbar-track {background: #f7eddc; box-shadow: 3px 3px 3px rgba(0, 0, 0, .1); border-radius: 10px;}
.sub03_contents .exhibits::-webkit-scrollbar-thumb:hover {background: #dbcfb5; cursor: pointer;}
.sub03_contents .exhibits ul {margin-right: 50px;}
.sub03_contents .exhibits ul:last-child {margin: 0;}
.sub03_contents .exhibits ul li {width: 210px; height: 260px; text-align: center; align-content: center; margin-bottom: 20px; background: url(images/sub/sub03_exhi_bg.png)no-repeat #fffcf6 center; border-radius: 10px; border: 1px solid #dbcfb5; box-shadow: 3px 3px 5px rgba(0, 0, 0, .1);}
.sub03_contents .exhibits ul li a {width: 100%; height: 100%; background-size: 40%; transition: .4s; filter: saturate(.3);}
.sub03_contents .exhibits ul li a:hover {transform: scale(1.1); filter: saturate(1); transform: translateY(-20px);}
.sub03_contents .exhibits li a::after {content: ""; width: 90%; height: 55px; display: inline-block; background: url(images/sub/sub03_veiwmore.png)no-repeat center / contain; transform: translate(0,210px); opacity: 0; transition: .7s;}
.sub03_contents .exhibits li a:hover::after {transform: translate(0, 190px); border-radius: 0 0 10px 10px; opacity: 1;}
.sub03_contents .exhibits h3 a {width: 100%; font-size: 1.6rem; color: #8b806c; background: #fffcf6; border-radius: 10px; padding: 10px 0; border: 1px solid #dbcfb5; text-align: center; box-shadow: 3px 3px 5px rgba(0, 0, 0, .1); transition: background-color .4s;}
.sub03_contents .exhibits h3 a:hover {background: #e0d6c0; font-weight: 800;}
.sub03_contents .exhi01 {background: url(images/sub/sub03_exhi01.png)no-repeat center / contain;}
.sub03_contents .exhi02 {background: url(images/sub/sub03_exhi02.png)no-repeat center / contain; background-size: 18% !important;}
.sub03_contents .exhi03 {background: url(images/sub/sub03_exhi03.png)no-repeat center / contain;}
.sub03_contents .exhi04 {background: url(images/sub/sub03_exhi04.png)no-repeat center / contain;}
/* room_info01 - 신라역사관 */
.room_info01 .map .map_left {background: url(images/sub/sub03_map.png) no-repeat #fffcf6 center;}
.room_info01 .map_left .num1 {display: block; left: 50%; top: 50%; transform: translate(-165px,60px); position: absolute; font-size: 1.6rem; width: 28px; height: 28px; background: #6d3434; border: 1px solid #fffcf6; border-radius: 100%; text-align: center; align-content: center; color: #f1f1f1;}
.room_info01 .map_left .num2 {left: 50%; top: 50%; transform: translate(108px,72px); position: absolute; font-size: 1.6rem; width: 28px; height: 28px; background: #6d3434; border: 1px solid #fffcf6; border-radius: 100%; text-align: center; align-content: center; color: #f1f1f1;}
.room_info01 .map_left .num3 {left: 50%; top: 50%; transform: translate(-75px,-160px); position: absolute; font-size: 1.6rem; width: 28px; height: 28px; background: #6d3434; border: 1px solid #fffcf6; border-radius: 100%; text-align: center; align-content: center; color: #f1f1f1;}
.room_info01 .map_left .num3-1 {position: absolute; transform: translate(150px, 5px);  font-size: 1.6rem; width: 28px; height: 28px; background: #6d3434; border: 1px solid #fffcf6; border-radius: 100%; text-align: center; align-content: center; color: #f1f1f1;}
.room_info01 .map_left .num4 {left: 50%; top: 50%; transform: translate(-167px,-160px); position: absolute; font-size: 1.6rem; width: 28px; height: 28px; background: #6d3434; border: 1px solid #fffcf6; border-radius: 100%; text-align: center; align-content: center; color: #f1f1f1;}
.room_info01 .map_right .num7 {width: 22px; height: 22px; background: url(images/sub/sub03_map_icon03.png)no-repeat center; transform: translateY(5px);}
/* room_info02 - 신라미술관 */
.room_info02 .map .map_left {background: url(images/sub/sub03_map2.png) no-repeat #fffcf6 center;}
.room_info02 .map_left .num1 {display: block; left: 50%; top: 50%; transform: translate(20px,-107px); position: absolute; font-size: 1.6rem; width: 28px; height: 28px; background: #6d3434; border: 1px solid #fffcf6; border-radius: 100%; text-align: center; align-content: center; color: #f1f1f1;}
.room_info02 .map_left .num2 {left: 50%; top: 50%; transform: translate(-185px,15px); position: absolute; font-size: 1.6rem; width: 28px; height: 28px; background: #6d3434; border: 1px solid #fffcf6; border-radius: 100%; text-align: center; align-content: center; color: #f1f1f1;}
.room_info02 .map_left .num3 {left: 50%; top: 50%; transform: translate(-157px,-103px); position: absolute; font-size: 1.6rem; width: 28px; height: 28px; background: #6d3434; border: 1px solid #fffcf6; border-radius: 100%; text-align: center; align-content: center; color: #f1f1f1;}
.room_info02 .map_left .num4 {left: 50%; top: 50%; transform: translate(115px,-125px); position: absolute; font-size: 1.6rem; width: 28px; height: 28px; background: #6d3434; border: 1px solid #fffcf6; border-radius: 100%; text-align: center; align-content: center; color: #f1f1f1;}
.room_info02 .map_left .num5 {left: 50%; top: 50%; transform: translate(18px,140px); position: absolute; font-size: 1.6rem; width: 28px; height: 28px; background: #6d3434; border: 1px solid #fffcf6; border-radius: 100%; text-align: center; align-content: center; color: #f1f1f1;}
.room_info02 .map_right .num7 {width: 22px; height: 22px; background: url(images/sub/sub03_map_icon01.png)no-repeat center; transform: translateY(5px);}
/* room_info03 - 월지관 */
.room_info03 .map .map_left {background: url(images/sub/sub03_map3.png) no-repeat #fffcf6 center / contain;}
.room_info03 .map_left .num1 {display: block; left: 50%; top: 0; transform: translate(-50%,30px); position: absolute; font-size: 1.6rem; width: 50px; height: 50px; background: #6d3434; border: 1px solid #fffcf6; border-radius: 10px; text-align: center; align-content: center; color: #f1f1f1;}
.room_info03 .map_left .num2 {left: 50%; bottom: 0; transform: translate(-50%,-260px); position: absolute; font-size: 1.6rem; width: 50px; height: 50px; background: #6d3434; border: 1px solid #fffcf6; border-radius: 10px; text-align: center; align-content: center; color: #f1f1f1;}
/* room_info04 - 신라천년보고 */
.room_info04 .map .map_left {background: url(images/sub/sub03_map4.png) no-repeat #fffcf6 center;}
.room_info04 .map_left .num1 {display: block; left: 50%; top: 50%; transform: translate(160px,30px); position: absolute; font-size: 1.6rem; width: 28px; height: 28px; background: #6d3434; border: 1px solid #fffcf6; border-radius: 100%; text-align: center; align-content: center; color: #f1f1f1;}
.room_info04 .map_left .num2 {left: 50%; top: 50%; transform: translate(-20px,-80px); position: absolute; font-size: 1.6rem; width: 28px; height: 28px; background: #6d3434; border: 1px solid #fffcf6; border-radius: 100%; text-align: center; align-content: center; color: #f1f1f1;}
.room_info04 .map_left .num3 {left: 50%; top: 50%; transform: translate(-172px,40px); position: absolute; font-size: 1.6rem; width: 28px; height: 28px; background: #6d3434; border: 1px solid #fffcf6; border-radius: 100%; text-align: center; align-content: center; color: #f1f1f1;}
.room_info04 .map_left .num4 {left: 50%; top: 50%; transform: translate(-145px,-80px); position: absolute; font-size: 1.6rem; width: 28px; height: 28px; background: #6d3434; border: 1px solid #fffcf6; border-radius: 100%; text-align: center; align-content: center; color: #f1f1f1;}
/* room_info05 - 옥외전시 */
.room_info05 .map .map_left {background: url(images/sub/sub03_map5.png) no-repeat #fffcf6 -300px center / cover;}

/* 서브04 - 소장품 */
#exhibits_searchbox {height: 35px; position: relative;}
.sub04_contents .exhibits_searchbox::before {content: ""; position: absolute; top: -58px; z-index: -1; display: inline-block; background: url(images/sub/sub04_searchbox_bg.png)no-repeat #faefdf center; width: 900px; height: 154px; background-blend-mode: multiply;}
#exhibits_list {width: 120px; background: #fffcf6; font-size: 1.6rem; border: 1px solid #dbcfb5; border-radius: 5px; color: #5c5039; font-weight: 500; padding: 0 5px; box-shadow: 3px 3px 5px rgba(0, 0, 0, .1);}
#exhibits_list option {font-weight: 500; font-size: 1.6rem; color: #5c5039;}
#exhibits_list:hover {background: #fbf3e1; font-weight: 700;}
#exhi_search {width: 40%; background: #fffcf6;  border-radius: 5px; margin: 0 20px; font-size: 1.4rem; border: 1px solid #dbcfb5;  border-radius: 5px; box-shadow: 3px 3px 5px rgba(0, 0, 0, .1);}
#exhi_search:focus {background: #fbf3e1; font-weight: 700;}
#search_btn {height: 100%;  border: 0;}
#search_btn i {font-size: 2.0rem; border: 1px solid #dbcfb5; border-radius: 5px; color: #5c5039; padding: 0 5px; background: #fffcf6; height: 100%; align-content: center; box-shadow: 3px 3px 5px rgba(0, 0, 0, .1);}
#search_btn i:hover {background: #fbf3e1; font-weight: 700;}
.sub04_contents .contents01 {flex-wrap: wrap; border-top: 1px solid #6c6658; margin: 60px 0; padding-top: 40px;}
#exhibits {width: 290px; height: 380px; margin: 0 20px; background: #fffcf6; border: 1px solid #dbcfb5; border-radius: 10px; position: relative; margin-bottom: 100px; box-shadow: 3px 3px 5px rgba(0, 0, 0, .1);}
#exhibits li {width: 100%; height: 100%; background: url(images/sub/sub04_exhi_bg.png) no-repeat center / 90%; align-content: center;}
#exhibits li a::before {content: ""; position: absolute; top: 0; left: 0px; border-radius: 0 0 10px 10px; background: #fbf3e1; display: inline-block; width: 100%; height: 100%; opacity: 0; transition: .4s;}
#exhibits li a:hover::before {opacity: .95; }
#exhibits li a::after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,80%); background: url(images/sub/sub03_veiwmore.png)no-repeat center; width: 100%; height: 59px; display: inline-block; opacity: 0; transition: .3s;}
#exhibits li a:hover::after {opacity: 1; transform: translate(-50%,-50%); filter: brightness(.8); }
#exhibits h3 {position: absolute; overflow: hidden; bottom: -50px; width: 100%; height: 40px; background: #fffcf6; border: 1px solid #dbcfb5; font-size: 1.6rem; color: #908671; border-radius: 10px; box-shadow: 3px 3px 5px rgba(0, 0, 0, .1);}
#exhibits h3 a {width: 100%; height: 100%; color: #908671; font-weight: 600; text-align: center; align-content: center;}
#exhibits h3 a:hover {font-weight: 700; background: #fbf3e1;} 
#exhibits p {color: #908671; font-weight: 600; margin-top: 20px;}
/* 소장품 이미지 */
#exhi01 a {width: 100%; height: 230px; background: url(images/sub/sub04_exhi01.png) no-repeat center / contain;}
#exhi02 a {width: 100%; height: 230px; background: url(images/sub/sub04_exhi02.png) no-repeat center / 70%;}
#exhi03 a {width: 100%; height: 230px; background: url(images/sub/sub04_exhi03.png) no-repeat center / 70%;}
#exhi04 a {width: 100%; height: 230px; background: url(images/sub/sub04_exhi04.png) no-repeat center / contain;}
#exhi05 a {width: 100%; height: 230px; background: url(images/sub/sub04_exhi05.png) no-repeat center / contain;}
#exhi06 a {width: 100%; height: 230px; background: url(images/sub/sub04_exhi06.png) no-repeat center / contain;}
#exhi07 a {width: 100%; height: 230px; background: url(images/sub/sub04_exhi07.png) no-repeat center / 75%;}
#exhi08 a {width: 100%; height: 230px; background: url(images/sub/sub04_exhi08.png) no-repeat center / 70%;}
#exhi09 a {width: 100%; height: 230px; background: url(images/sub/sub04_exhi09.png) no-repeat center / contain;}
/* pager */
#pager li {width: 34px; height: 34px; overflow: hidden; font-size: 1.6rem; margin: 0 10px; background: #fffcf6; border: 1px solid #dbcfb5; box-shadow: 3px 3px 5px rgba(0, 0, 0, .1); border-radius: 5px;}
#pager li:nth-child(1), #pager li:nth-child(2) {margin-left: 0;} 
#pager li:nth-child(8), #pager li:nth-child(9) {margin-right: 0;} 
#pager li a {width: 100%; height: 100%; color: #908671; text-align: center; align-content: center;}
#pager li:nth-child(3) a {background: #fbf3e1;}
#pager li a:hover, #pager li a:focus {background: #fbf3e1;}
#pager li i {color: #908671; font-size: 1.6rem;}

/* 서브04-1 - 소장품 뷰페이지 */
.sub04-1_contents .info_top {height: 420px;}
.sub04-1_contents .img_box {width: 40%; align-content: center; text-align: center; border-radius: 10px 0 0 10px; background: url(images/sub/sub04-1_bg1.png)no-repeat 0 / cover; box-shadow: 3px 3px 5px rgba(0, 0, 0, .1); }
.sub04-1_contents .txt_box {width: 60%; padding: 40px; line-height: 40px; border-radius: 0 10px 10px 0; background: url(images/sub/sub04-1_bg2.png)no-repeat right; box-shadow: 3px 3px 5px rgba(0, 0, 0, .1);}
.sub04-1_contents .txt_box h3 {font-size: 1.6rem; color: #5c5039;}
.sub04-1_contents .txt_box p:first-child {width: 90px; }
.sub04-1_contents .txt_box p:last-child::before {content: ""; display: inline-block; margin-right: 20px; height: 15px; width: 1px; background: #908671;}
.sub04-1_contents .info_bott {margin: 40px 0; border-bottom: 1px solid #6c6658;}
.sub04-1_contents .info_bott h3 {font-size: 1.8rem; color: #5c5039;}
.sub04-1_contents p {font-size: 1.6rem; color: #5c5039; text-align: justify; line-height: 30px;}
.sub04-1_contents .info_bott p {margin-top: 20px; padding-bottom: 60px;}
#list_btn {width: 100%; border: 0; background: 0; text-align: center;}
#list_btn i {color: #908671; font-size: 1.6rem; margin-right: 10px;}
#list_btn a {width: 95px; height: 48px; background: #fffcf6; box-shadow: 3px 3px 5px rgba(0, 0, 0, .1); border: 1px solid #dbcfb5; border-radius: 10px; font-size: 1.6rem; font-weight: 500; color: #908671; align-content: center;}
#list_btn a:hover {background: #fbf3e1; font-weight: 600;}

/* 서브05 - 새소식 */
.sub05_contents {margin: 60px 0;}
.sub05_contents .contents01 {margin: 60px 0; border-top: 1px solid #6c6658; padding-top: 40px;}
.sub05_contents .exhibits_searchbox::before {content: ""; position: absolute; top: -58px; z-index: -1; display: inline-block; background: url(images/sub/sub05_searchbox_bg.png)no-repeat #faefdf right; width: 900px; height: 154px; background-blend-mode: multiply;}
.sub05_contents table {width: 100%; background: #fffcf6; border-radius: 5px; border: 1px solid #dbcfb5; margin-bottom: 40px;}
.sub05_contents th {font-size: 1.6rem; color: #5c5039; font-weight: 700; padding: 15px 0; background: #fffcf6; border-bottom: 1px solid #dbcfb5;}

.sub05_contents tr:first-child, .sub05_contents tr:nth-child(2), .sub05_contents tr:nth-child(3), .sub05_contents tr:nth-child(4) {font-weight: 700;}
.sub05_contents tr i {font-size: 1.4rem; color: #5c5039;}
.sub05_contents tr:hover {background: #fbf3e1;}
.sub05_contents td {font-size: 1.4rem; color: #5c5039; padding: 15px 0; border-top: 1px solid #dbcfb5; margin: 0 10px;}
.sub05_contents td:nth-child(1), .sub05_contents td:nth-child(3), .sub05_contents td:nth-child(4), .sub05_contents td:nth-child(5) {text-align: center;}
.sub05_contents td:nth-child(2) a {position: relative; z-index: 1; }
.sub05_contents td:nth-child(2) a::after {content: ""; transition: .4s; position: absolute; left: -10px; bottom: 0px; z-index: -1; width: 0%; height: 30%; display: inline-block; background: url(images/layout/snb_line.png)no-repeat center / cover;}
.sub05_contents td:nth-child(2):hover a::after {content: ""; width: 100%;}
.sub05_contents tbody .tit {padding-left: 10px;}
.sub05_contents tbody .general {font-weight: 500;}
/* 서브05-1 - 새소식 뷰페이지 */
.sub05-1_contents .content_tit {margin: 0;}
.sub05-1_contents table {margin-bottom: 40px;}
.sub05-1_contents thead {text-align: left; background: #fbf3e1; outline: 1px solid #dbcfb5;}
.sub05-1_contents thead tr:first-child th {padding: 20px;}
.sub05-1_contents .title {margin-left: 20px; width: 100%; font-size: 1.6rem; font-weight: bold; color: #5c5039;}
.sub05-1_contents .written {padding-left: 20px;}
.sub05-1_contents .written p {margin-right: 15px; color: #5c5039;}
.sub05-1_contents .written p::after {content: ""; display: inline-block; width: 2px; height: 12px; background: #dbcfb5; margin-left: 15px;}
.sub05-1_contents .written p:last-child:after {display: none;}
.sub05-1_contents .download::before {content: ""; display: inline-block; height: 1px; width: 100%; background: #dbcfb5; margin: 15px 0;}
.sub05-1_contents .download i {font-size: 1.4rem; color: #5c5039; margin-right: 10px;}
.sub05-1_contents .download p {text-align: left; margin: 0 20px 20px 20px;}
.sub05-1_contents .download a {font-size: 1.4rem; color: #5c5039; font-weight: 500; }

.sub05-1_contents tbody {background: #fffcf6; outline: 1px solid #dbcfb5;}
.sub05-1_contents tbody td {font-size: 1.6rem; color: #5c5039; font-weight: 500; padding: 40px;}

.sub05-1_contents tfoot {background: #fbf3e1; outline: 1px solid #dbcfb5;}
.sub05-1_contents tfoot td {font-size: 1.6rem; color: #5c5039; font-weight: 600; padding: 20px; border-top: 1px solid #dbcfb5;}
.sub05-1_contents tfoot a {margin-left: 10px; color: #5c5039;}
.sub05-1_contents tfoot a::before {content:  ""; display: inline-block; width: 2px; height: 15px; background: #dbcfb5; margin-right: 10px;}
.sub05-1_contents tfoot a:hover {font-weight: 800;}


/* 반응형 */
@media screen and (max-width: 1300px) {
    .sub_contents_wrap .snb_wrap {display: none;}
    .sub_contents_wrap > article {position: static; max-width: 100%; padding: 0 10px;}
    .map::before {left: 0;}
    .map::after {bottom: -40px; right: 0;}
    .sub04-1_contents .info_top {justify-content: center;}
    .sub04-1_contents .img_box {width: 48%;}
    .sub04-1_contents .txt_box {width: 48%;}
    .sub04-1_contents .info_bott {width: 98%;}
    .sub05_contents col:nth-child(1) {width: 8%;}
    .sub05_contents col:nth-child(2) {width: 56%;}
    .sub05_contents col:nth-child(3) {width: 12%;}
    .sub05_contents col:nth-child(4) {width: 12%;}
    .sub05_contents col:nth-child(5) {width: 8%;}
} 

@media screen and (max-width: 1024px) {
    .sub01_contents .contents01 p {padding: 0 20px;}
    .sub01_contents .contents02 {flex-wrap: wrap;}
    .sub01_contents .contents02 .info_box {width: 100%; margin-bottom: 30px; display: flex; padding: 40px;}
    .sub01_contents .contents02 .img_box {width: 80%; height: 200px;}
    .sub01_contents .contents02 .info_wrap {width: 100%;}
    .sub01_contents .contents02 .info_wrap h3 {margin-top: 10px;}
    .sub01_contents .contents03 .img_box .img01 {height: 260px;}
    .sub01_contents .contents03 .img_box h2 {font-size: 260%;}
    .sub02_contents .contents01 .map {height: 50vh;}
    .sub02_contents .contents02 ul {height: 380px; padding: 0 20px;}
    #exhibits:last-child {display: none;}
}

@media screen and (max-width: 900px) {
    .sub01_contents .contents01 p {padding: 0;}
    .sub02_contents .contents02 ul {height: 380px; padding: 0 10px;}
    .sub02_contents .contents02 .txt_box h2 {font-size: 2.4rem;}
    .sub02_contents .contents02 .txt_box li {font-size: 1.2rem;}
    .sub03_contents .room_info_wrap .map {flex-wrap: wrap;}
    .map .map_left {background-size: auto; width: 100% !important;}
    .map .map_right {width: 100% !important;}
    .room_info03 .map .map_left {background-size: 60%;}
    
}

@media screen and (max-width: 800px) {
    .sub01_contents .contents01 .img_box {background-position-y: center; height: 230px;}
    .sub01_contents .contents03 .illust_box p {padding: 10px;}
    .sub01_contents .illust01 {background-size: 70% !important;}
    .sub01_contents .illust02, .sub01_contents .illust03, .sub01_contents .illust04 {background-size: 80% !important;}
    .sub02_contents .contents02 > div {flex-wrap: wrap;}
    .sub02_contents .contents02 ul {height: 100%; flex-wrap: wrap; padding: 30px 0;}
    .sub02_contents .contents02 .txt_box {padding: 0; width: 95%; text-align: center;}
    .sub02_contents .contents02 .txt_box h2 {text-align: center;}
    .sub02_contents .contents02 .txt_box::after {background: left center;}
    .room_tit .room_btn {width: 18%;}
    .sub04-1_contents .img_box {width: 40%;}
    .sub04-1_contents .txt_box {width: 60%;}
    .sub05_contents col:nth-child(1) {width: 8%;}
    .sub05_contents col:nth-child(2) {width: 60%;}
    .sub05_contents col:nth-child(3) {width: 17%;}
    .sub05_contents col:nth-child(4) {width: 15%;}
    .sub05_contents .views {display: none}
}

@media screen and (max-width: 700px) {
    .sub01_contents .contents03 .img_box h2 {font-size: 200%; line-height: 30px;}
    .sub01_contents .contents03 .illust_box {flex-wrap: wrap;}
    .sub01_contents .contents03 .illust_box li {width: 50%;}
    .sub01_contents .contents03 .illust_box li:nth-child(3)::after {display: none;}
    .sub05_contents col:nth-child(2) {width: 77%;}
    .sub05_contents .name {display: none}
}

@media screen and (max-width: 650px) {
    .map .map_left {height: 440px;}
    .room_info03 .map .map_left {background-size: contain;}
    .room_info03 .map_left .num1 {transform: translate(-200px,0);}
    .room_info03 .map_left .num2 {transform: translate(-200px,-120px);}
    #exhi_search {width: 50%;}
    .sub04-1_contents .info_top {flex-wrap: wrap; height: 100%;}
    .sub04-1_contents .img_box {width: 100%;}
    .sub04-1_contents .img_box img {height: 90%;}
    .sub04-1_contents .txt_box {width: 100%;}

}

@media screen and (max-width: 600px) {
    .bott_bg {height: 200px; background-position-x: right;}
    .sub01_contents .contents02 .info_box {padding: 20px;}
    .sub01_contents .contents02 .img02 {background-position-y: -26px;}
    .sub01_contents .contents02 .info_box .caution {font-size: 1.2rem;}
    .sub01_contents .contents02 .info_box .caution i {font-size: 1.2rem;}
    .sub01_contents .contents03 .img_box .img01 {height: 170px;}
    .sub01_contents .contents03 .img_box h2 {font-size: 180%;}
    .sub02_contents .contents01 .map {height: 25vh; margin: 80px 0;}
    .sub02_contents .contents01 .location_box::before {left: 300px; top: 205px; transform: rotate(-90deg); background-size: 50%;}
    .sub03_contents .txt_box p {font-size: 140%;}
    .sub04-1_contents .info_bott p {font-size: 140%;}
    /* h2 {font-size: 2.6rem;} */
    .sub05_contents th {font-size: 1.4rem;}
    .sub05_contents tbody td {font-size: 1.2rem;}
}

@media screen and (max-width: 550px){
    .sub02_contents .contents01 .location {width: 90%;}
    .sub03_contents .txt_box p {font-size: 1.6rem;}
    .room_tit .room_btn {font-size: 120%;}
    .room_tit .room_btn:hover, .room_tit .room_btn.on {border-radius: 10px;}
    .room_btn::before {width: 50%; margin: 0 auto;}
    .map::before {top: -60px; left: -10px;}
    .sub05_contents .num {display: none}
    .sub05_contents col:nth-child(1) {width: 80%;}
    .sub05_contents col:nth-child(2) {width: 20%;}
}

@media screen and (max-width: 450px){
    .sub03_contents .video iframe {width: 90%;}
    .sub03_contents .location_box {width: 90%; height: 200px; background: none;}
    .sub03_contents .location {width: 90%; transform: translate(-45%,-45%);}
    .sub03_contents .location li {font-size: 1.2rem;}
}