@charset "UTF-8";

/*공통*/
#content {margin: 40rem 0;}
#content.ver1 h4.first, #content.ver1 h5.first, #content.ver1 h6.first {margin-top: 0;}
#content.ver1 h4, #content.ver1 h5 {font-family: var(--point_font); font-weight: 600; color: var(--common_color);}
#content a.cont_btn, #content a.cont_btn2 {border-radius: 0; border}
#content.ver1 .content_box {border-radius: 0; background: #f9f9f9; border : none;}
#content.ver1 dl.content_box.icon::before { height: 100rem; background: url('/WebContent/design/sunbi/img/contents/icon_content_box.png') no-repeat center/contain;}
#content.ver1 dl.content_box {border-top: none; border-radius: 0;}
#content.ver1 dl.content_box dt {font-family: var(--point_font); color: var(--p_color);}
#content.ver1 .depth1:not(.depth2, .depth3, .depth4) > li::before {border-radius: 0; background: var(--common_color);}
#content a.cont_btn2.yellow {background: var(--y_color); border-color: var(--y_color); color: inherit;}
#content a.cont_btn2.green {background: var(--p_color); border-color: var(--p_color); color: #ffffff;}
#content a.cont_btn2.black {background: var(--p_color); color: #ffffff;}
#content a.cont_btn2.yellow.blank::after {background-position-y: -20px;}
#content a.cont_btn2.yellow.down::after {background-position-y: 0px;}
#content a.cont_btn2.yellow.view::after {background-position-y: -40px;}

/*게시판*/
.board_photo a {border-radius: 0; border: none;}

/*인사말*/
#content.ver1 .greeting > .content_box:nth-child(1) {background: url('/WebContent/design/sunbi/img/main/visual_ch.png') no-repeat bottom -5rem right 30rem/300rem; padding-bottom: 150rem;}
#content.ver1 .greeting > .content_box:nth-child(1) p {font-size: 18rem; font-weight: 500;}
#content.ver1 .greeting > .content_box:nth-child(1) .tit { font-family: 'Godo', sans-serif; font-size: 28rem; font-weight: 600; line-height: 1.3; margin-bottom: 16rem; color: var(--p_color);}
@media all and (max-width: 768px) {
  #content.ver1 .greeting > .content_box:nth-child(1) {background-position-x: center; background-size: 200rem;}
}

/*선비촌 둘러보기*/
#content.ver1 .preview h5 {padding-top: 30rem; border-top: 1px solid #eeeeee;}
#content.ver1 .preview_pic {display: flex; flex-wrap: wrap;}
#content.ver1 .preview_pic > div {width: calc((100% - 40rem)/3); height: 180rem; margin: 0 10rem; overflow: hidden; position: relative; border-radius: 4rem;}
#content.ver1 .preview_pic > div > img {position: absolute; top: 50%; left: 50%; min-width: 100%; width: auto; max-width: none; min-height: 100%; max-height: 150%; transform: translate(-50%, -50%);}
#content.ver1 .preview_pic > div:first-child {margin-left: 0;}
#content.ver1 .preview_pic > div:last-child {margin-right: 0;}
@media all and (max-width: 768px) {
    #content.ver1 .preview_pic > div {height: 130rem;}
}
@media all and (max-width: 480px) {
    #content.ver1 .preview_pic > div {width: 100%; margin: 10rem 0; height: 160rem;}
    #content.ver1 .preview_pic > div > img {max-width: 100%; max-height: none;}
    #content.ver1 .preview_pic > div:first-child {margin-top: 0;}
    #content.ver1 .preview_pic > div:last-child {margin-bottom: 0;}
}

/*배치도*/
.guide_map .title { text-align:center; }
.guide_map .title dt { font-size:35rem; font-weight:600; }
.guide_map .title dd { font-size:25rem; }
#map_img_wrap { position:relative; overflow:hidden; margin:30rem auto; }
#map_img_wrap div { position:relative; max-width:1100px; margin:0 auto; }
#map_img_wrap img { transform-origin: 0 0; transition: transform 0.45s ease; will-change: transform; }
.map_btn_wrap {display:flex; align-items:center; justify-content:space-between; margin-bottom:30rem; }
#resetBtn { display:flex; align-items:center; background:#555; color:#fff; border:0; cursor:pointer; padding: 7rem 15rem; z-index:1; }
.guide_map .btn_list {display:flex; flex-wrap:wrap; justify-content: space-between; }
.guide_map .btn_list dl { width:calc((100% - 60rem)/2); margin:0 0 20rem 30rem;  }
.guide_map .btn_list dl:first-of-type {margin-left:0; }
.guide_map .btn_list dl dt {text-align:center; padding:5rem 0; border-radius: 20rem; color:#fff; font-size:1.1em; font-weight:600; margin-bottom:5rem; }
.guide_map .btn_list a { position:relative; display:block; border-bottom:1px dashed #ccc; padding:5rem 0 5rem 25rem;  }
.guide_map .btn_list a strong { position:absolute; left:0; top:8rem; width:20rem; line-height:20rem; border-radius:50%; text-align:center; color:#fff; font-size:0.8em; }
.guide_map .btn_list a span { font-size:0.8em; }
.guide_map.sunbichon .btn_list dl dt, .guide_map.sunbichon .btn_list a strong {background:#f05761;}
.guide_map.sunbi .btn_list dl dt, .guide_map.sunbi .btn_list a strong {background:#0088cc;}
@media all and (max-width:768px){
	.guide_map .btn_list dl { width:calc((100% - 60rem)/2); }
}
@media all and (max-width:480px){
	.guide_map .btn_list dl { width:calc((100% - 30rem)/2); }
}


/*찾아오시는 길*/
#content.ver1 .root_daum_roughmap .cont {display: none;}

/*고택소개*/
/* #content.ver1 .hanok_box {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; margin-bottom: 30rem; padding-top: 30rem; border-top: 1px solid #eeeeee;}
#content.ver1 .hanok_gallery {width: 50%; overflow-x: hidden; position: relative; background: #f6f6f6; border-radius: 10rem; padding-bottom: 15rem;}
#content.ver1 .hanok_gallery .swiper-slide {position: relative; width: 100%; height: 360rem; text-align: center; padding: 30rem;}
#content.ver1 .hanok_gallery .swiper-slide span {position: absolute; bottom: 50rem; left: 50%; transform: translateX(-50%); padding: 4rem 16rem; background: rgba(0, 0, 0, 0.6); color: #ffffff;}
#content.ver1 .hanok_gallery .swiper-slide img {min-height: 100%; max-height: 100%;}
#content.ver1 .hanok_gallery .swiper-button-next, .swiper-button-prev {background: rgba(0,0,0,0.5); border-radius: 50%; width: 40rem; height: 40rem; color: #ffffff;}
#content.ver1 .hanok_gallery .swiper-button-next::after,
#content.ver1 .hanok_gallery .swiper-button-prev::after {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 18rem}
#content.ver1 .hanok_gallery .swiper-button-next::after {content: '→';}
#content.ver1 .hanok_gallery .swiper-button-prev::after {content: '←';}
#content.ver1 .hanok_gallery .swiper-pagination-bullet-active {background: var(--p_color);}
#content.ver1 .hanok_box .info {width: calc(50% - 30rem);}
#content.ver1 .hanok .content_box {background: #ffffff;}
@media all and (max-width: 930px) {
  #content.ver1 .hanok_gallery, #content.ver1 .hanok_box .info {width: 100%;}
} */

/*수련원연혁*/
.history dl {display: flex; flex-wrap: wrap; padding: 20rem 0; border-top: 1px dashed #eeeeee;}
.history dl dt {font-size: 24rem; font-weight: 800; margin-right: 20rem; width: 120rem; text-align: center; padding: 8rem; background: #f7f7f7;}
.history dl:first-of-type dt {background: var(--p_color); color: #ffffff;}
.history dl dd li {display: flex; flex-wrap: wrap;}
.history dl dd strong {display: inline-block; margin-right: 10rem;}
@media all and (max-width: 680px) {
  .history dl {border-top: none; padding-bottom: 10rem;}
  .history dl dt {width: 100%; margin-right: 0; border-radius: 30rem 30rem 0 0;}
}

/*수련원시설안내*/
#content.ver1 .facility .facility_box {display: flex; flex-wrap: wrap; align-items: flex-start; margin-top: 50rem; gap : 20rem;}
#content.ver1 .facility .facility_box.num1, #content.ver1 .facility .facility_box.num2, .facility .facility_box.num3 {margin-top: 50rem;}
#content.ver1 .facility .facility_box > .facility_thumb {display: block; width: calc((100% - 60rem)/4); height: 360rem; position: relative; overflow: hidden; background: var(--common_color); transition: all 0.5s;}
/* #content.ver1 .facility .facility_box.num3 > .facility_thumb {width: calc((100% - 40rem)/3);}
#content.ver1 .facility .facility_box.num2 > .facility_thumb {width: calc((100% - 20rem)/2);}
#content.ver1 .facility .facility_box.num1 > .facility_thumb {width: 100%;} */
#content.ver1 .facility .facility_box > .facility_thumb::before {content: ''; display: block; position: absolute; width: 100%; height: 100%; opacity: 0.6; background-repeat: no-repeat; background-size: cover; background-position: center center; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.5s;}
#content.ver1 .facility .facility_box > .facility_thumb span {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: block; width: 100%; padding: 6rem 20rem; text-align: center; background: rgba(0, 0, 0, 0.7); color: #ffffff; font-weight: 600;}
#content.ver1 .facility .facility_box > .facility_thumb:hover::before {transform: translate(-50%, -50%) scale(1.5); opacity: 1;}

.modal {display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 1000;}
.modal.active { display: flex; align-items: center; justify-content: center; }
.mdCont { display: none; position: relative; padding: 20px; margin-top: 40rem; max-width: 900rem; width: 100%; }
.mdCont.active { display: block; }
.mdCont .facility-slide {width: 100%; margin: 0 auto; overflow: hidden; position: relative;}
.mdCont .facility-slide .swiper-slide { width: 100%; height: 450rem; overflow: hidden; background: rgba(0, 0, 0, 0.3); position: relative;}
.mdCont .facility-slide img {object-fit: cover; max-width: 100%; min-height: 100%; width: auto !important; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.mdCont .facility-slide .swiper-slide span {position: absolute; z-index: 1; background: rgba(0, 0, 0, 0.7); color: #ffffff; padding: 10rem 20rem; bottom: 0; right: 0;}
.mdCont .thumb-slide {margin-top: 20rem; width: 100%; overflow: hidden;}
.mdCont .thumb-slide .swiper-slide {overflow: hidden; height: 125rem; display: block; cursor: pointer;}
.mdCont .thumb-slide img {object-fit: cover; min-width: 100%; min-height: 100%;}
.mdCont .facility-slide .swiper-button-next, .swiper-button-prev {background: rgba(0,0,0,0.7); border-radius: 50%; width: 40rem; height: 40rem; color: #ffffff;}
.mdCont .facility-slide .swiper-button-next::after,
.mdCont .facility-slide .swiper-button-prev::after {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 18rem}
.mdCont .facility-slide .swiper-button-next::after {content: '→';}
.mdCont .facility-slide .swiper-button-prev::after {content: '←';}
.mdCont .info .label_pro {display: inline-block; font-family: var(--body_font); font-size: 14rem; border-radius: 4rem; margin-left: 10rem; margin-bottom: 4rem; color: var(--common_color); background: var(--y_color); padding: 4rem 10rem;}
.mdCont .close { position:absolute; top:-35rem; right:0; width:50rem; height:50rem; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; margin:0; }
.mdCont .close span { position:absolute; left:-99999rem; top:-999999rem; }
.mdCont .close::before { content:''; display:block; width:20px; height:20px; background: url('/WebContent/design/common/template/sprite.png') no-repeat -81px 0;}
@media all and (max-width: 1041px) {
  .mdCont .thumb-slide .swiper-slide a {height: 110rem;}
}
@media all and (max-width: 980px) {
  #content.ver1 .facility .facility_box > .facility_thumb {height: 250rem;}
}
@media all and (max-width: 768px) {
  #content.ver1 .facility .facility_box > .facility_thumb, #content.ver1 .facility .facility_box.num3 > .facility_thumb {width: calc((100% - 20rem)/2);}
}
@media all and (max-width: 520px) {
  .mdCont .facility-slide .swiper-slide {height: 400rem;}
  .mdCont .thumb-slide {display: none;}
}
@media all and (max-width: 410px) {
  #content.ver1 .facility .facility_box > .facility_thumb, #content.ver1 .facility .facility_box.num3 > .facility_thumb {width: 100%;}
}

/*프로그램 안내*/
.pro_list {display: flex; flex-wrap: wrap; gap: 20rem; margin: 80rem 0 60rem;}
.pro_box {width: calc((100% - 80rem)/5); min-height: 430rem; padding: 30rem; color: #ffffff; background: rgba(0, 0, 0, 0.7) no-repeat bottom right;}
.pro_box:nth-child(1) {background-image: url('/WebContent/design/sunbi/img/contents/procate01.png');}
.pro_box:nth-child(2) {background-image: url('/WebContent/design/sunbi/img/contents/procate02.png');}
.pro_box:nth-child(3) {background-image: url('/WebContent/design/sunbi/img/contents/procate03.png');}
.pro_box:nth-child(4) {background-image: url('/WebContent/design/sunbi/img/contents/procate04.png');}
.pro_box:nth-child(5) {background-image: url('/WebContent/design/sunbi/img/contents/procate05.png');}
.pro_box p {font-family: var(--point_font); font-weight: 600; font-size: 24rem; margin-bottom: 20rem;}
.pro_box li {margin-bottom: 8rem;}
.flex_box {display: flex; flex-wrap: wrap; gap: 20rem;}
.flex_box > div {width: calc((100% - 20rem)/2);}
@media all and (max-width: 1420px) {
  .pro_box {width: calc((100% - 20rem)/2);}
}
@media all and (max-width: 1240px) {
  .flex_box > div {width: 100%;}
}
@media all and (max-width: 480px) {
  .pro_box {width: 100%;}
}


/* 테마파크소개 > 소개 */
.park_info { text-align:center; /*background:linear-gradient(90deg, #48C5FF 0, #98E0FF 100%);*/ /*border-radius: 20rem;*/ overflow:hidden;}
.park_info dl {padding:50rem 50rem 0; }
.park_info dl dt {margin-bottom:50rem; }
.park_info dl dt img { width:70%; max-width:400rem; }
.park_info dl dd { font-size:1.2em; }
.park_info dl dd p { margin-top:20rem; }
.park_info dl dd p.big { font-size:1.2em; }
.park_info .character { position:relative; display:flex; flex-direction:column; }
.park_info .character .char { position:absolute; left:50%; bottom:40rem; z-index:2; transform:translateX(-50%); width:70%; max-width:950rem;  }
.park_info .character::after { content:''; display:block; height:100rem; background:#FFE6A1; margin-top:-10rem;  }
@media all and (max-width:768px){
	.park_info dl {padding:30rem 30rem 0; }
	.park_info dl dt {margin-bottom:30rem; }
	.park_info dl dd p { font-size:0.9em; }
	.park_info dl dd p.big { font-size:1em; }
}

/* 테마파크소개 > BI */
.park_bi h4+p,
.park_bi h5+p {margin-bottom:30rem; }
.park_bi .bi_wrap { display:flex; flex-wrap:wrap; justify-content:space-between; margin-bottom:40rem; }
.park_bi .bi_wrap > div { text-align:center; align-content:center; width:calc((100% - 50rem)/2); border:6px solid #eee; background:#fff url('/WebContent/design/sunbeeworld/img/content/park_bi_grid.png'); padding:40rem; }
.park_bi .color_wrap { display:flex; flex-wrap:wrap; justify-content:space-between; }
.park_bi .color_wrap > div {width:calc((100% - 100rem)/3); }
.park_bi .color_wrap > div::before {content:''; display:flex; width:100%; height:60rem; border-radius:20rem; margin-bottom:20rem;  }
.park_bi .color_wrap > div.color1::before { background:rgba(255, 119, 136, 1);}
.park_bi .color_wrap > div.color2::before { background:rgba(13, 150, 252, 1);}
.park_bi .color_wrap > div.color3::before { background:rgba(96, 60, 247, 1);}
.park_bi .color_wrap > div.color4::before { background:rgba(255, 215, 148, 1);}
.park_bi .color_wrap > div.color5::before { background:rgba(1, 254, 254, 1);}
.park_bi .color_wrap > div.color6::before { background:rgba(0, 0, 0, 1);}
.park_bi .color_wrap > div dt {font-weight:600; font-size:1.1em;  }
.park_bi .color_wrap > div dd {margin-bottom:10rem ;}
.park_bi .color_wrap > div p {font-size:0.9em; margin-top:5rem; }
@media all and (max-width:768px){
	.park_bi .bi_wrap > div { width:calc((100% - 20rem)/2); padding:20rem; }
	.park_bi .color_wrap > div {width:calc((100% - 40rem)/3); }
}
@media all and (max-width:480px){
	.park_bi .bi_wrap > div,
	.park_bi .color_wrap > div { width:100%; margin:10rem 0; }
}

/* 테마파크소개 > 캐릭터소기 */
.park_char .cont1 { position:relative; /*background:linear-gradient(90deg, #48C5FF 0, #98E0FF 100%);*/ /*border-radius: 20rem;*/ overflow:hidden; }
.park_char .cont1 > div { position:relative; display:flex; align-items:flex-end; justify-content:center; padding:50rem 50rem 250rem;  z-index:1; }
.park_char .cont1 > div > img { width:80%; max-width:500rem; margin-left:40rem; }
.park_char .cont1 dt {font-weight:600; font-family:'Godo', sans-serif; font-size:2em; margin-bottom:20rem; }
.park_char .cont1 dt span { display:inline-flex; font-weight:400; font-size:0.7em; }
.park_char .cont1 dd {margin-top:10rem; text-shadow:1rem 1rem 3rem rgba(255,255,255,0.9); }
.park_char .cont1 > img {position:absolute; left:0; bottom:0; width:100%; }
.park_char .cont2,
.park_char .cont2 > div { display:flex; flex-wrap:wrap; justify-content:space-between; }
.park_char .cont2 h4 {width:100%;}
.park_char .cont2 > div { align-items:flex-start; width:calc((100% - 60rem)/3); }
.park_char .cont2 > div > * { width:calc((100% - 20rem)/2);  }
.park_char .cont2 > div div { max-width:200rem; border-radius:50%; overflow:hidden; /*background:#f2ca20;*/ text-align:center;}
/* .park_char .cont2 > div:nth-of-type(2) div { background:#43d5f7; }
.park_char .cont2 > div:nth-of-type(3) div { background:#e86a52; } */
.park_char .cont2 > div dt {font-family:'Godo', sans-serif; font-weight:600; font-size:1.2em; margin-bottom:10rem;}
@media all and (max-width:1470px){
	.park_char .cont1 > div { flex-wrap:wrap; padding:50rem; }
	.park_char .cont1 > div dl { width:100%; }
	.park_char .cont1 > div > img { margin-left:0; margin-top:30rem;}
}
@media all and (max-width:768px){
	.park_char .cont1 > div { padding:30rem; }
	.park_char .cont2 > div {width:100%; margin-top:30rem; }
	.park_char .cont2 > div > * { width:calc(100% - 210rem);  }
	.park_char .cont2 > div > div { width:190rem; }
}