@charset "utf-8";

/*레이어팝업*/
.fixed_popup { position:fixed; top:0; left:0; width:100%; height:100%; z-index:99999;}
.fixed_popup::after { content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:0.3; z-index:-1; }
.fixed_popup .fix_popup { position:absolute; left:50%; top:50%; width:96%; max-width:600px; transform:translate(-50%, -50%); background:#fff; padding:10px; border-radius:10px; }
.fixed_popup form { position:relative; padding:10px 0 0; font-size:14px;}
.fixed_popup form a {position:absolute; right:0; top:10px; font-weight:600;  background: #000; color: #fff; padding: 0 10px;}
.fix_popup img {width:100%; }
.fixed_popup.disN {display:none;}
/*popup1*/
#fixed_popup01 .popup_content { position:relative; background:#eae3d9; padding:40rem; }
#fixed_popup01 .popup_content::before,
#fixed_popup01 .popup_content::after { content:''; position:absolute; left:0; top:0; width:100%; height:100%; }
#fixed_popup01 .popup_content::before  {  background:url('/design/k-hyo/img/popup_bg.jpg') no-repeat center/cover; z-index:0; opacity:0.6; }
#fixed_popup01 .popup_content::after{ background:#eae3d9; z-index:-1; }
#fixed_popup01 .popup_content > * {position:relative; z-index: 2;}
#fixed_popup01 .popup_content dt,
#fixed_popup01 .popup_content .last { font-family:var(--serif); font-size:40rem; margin-bottom:30rem; font-weight:800; text-align:center; color:var(--p_color); }
#fixed_popup01 .popup_content dd p {text-indent:20rem; margin-top:15rem; }
#fixed_popup01 .popup_content .date { color:#000;  border-top:1px solid var(--p_color); border-bottom:1px solid var(--p_color); font-weight:600; padding:10rem 20rem; text-align:center; margin:30rem 0; color:var(--p_color); }
#fixed_popup01 .popup_content .date p:first-of-type { font-size:25rem;}
#fixed_popup01 .popup_content .last {font-size:25rem; margin-bottom:0; }
@media all and (max-width:480px){
    #fixed_popup01 .popup_content { padding:20rem; }
    #fixed_popup01 .popup_content dt {margin-bottom:10rem;}
    #fixed_popup01 .popup_content dd p {margin-top:5rem;}
    #fixed_popup01 .popup_content .date {margin:10rem 0; }
}



#container h2 { width:100%; font-size:50rem; font-family:var(--serif); color:var(--p_color); margin-bottom:30rem; }
#container a.more { display:flex; align-items:center; gap:10rem; position:absolute; right:0; top:10rem; }
#container a.more::after {content:''; display:block; width:8px; height:13px; background:var(--sprite) -18px -80px; }
@media all and (max-width:1023px){
    #container h2 { font-size:40rem; }
}

.visual_wrap { position:relative; padding:170rem 0; background:url('/design/k-hyo/img/main_bg.jpg') repeat center; overflow:hidden; }
.visual_wrap .wrap { display:flex; justify-content:space-between;}
@media all and (max-width:1300px){
    .visual_img {zoom:80%;}
}
@media all and (max-width:1023px){
    .visual_wrap { padding:150rem 0 50rem; }
    .visual_wrap .wrap { flex-direction:column-reverse; align-items:center; gap:40rem; }
    .visual_img {display:none;}
}

.popup {position:relative; width:550rem; flex-shrink:0; }
.popup > img { position:absolute; right:-6rem; bottom:-6rem; border-radius:0 !important; z-index:1; }
.popup > img.snake2 { right:auto; bottom:auto; left:-45rem; top:27rem; }
.popup img {border-radius:50%;}
.popup .control { position:absolute; left:-10rem; top:50%; transform:var(--hcenter); z-index:2; }
.popup .control a,
.popup .control span { display:flex; align-items:center; justify-content:center; width:20rem; height:20rem; border-radius:50%; background:var(--p_color); box-shadow:0 0 5rem rgba(0,0,0,0.2); text-indent:-999999px; margin:20rem 0 !important; }
.popup .control span.swiper-pagination-bullet-active { background:var(--blue);}
.popup .control a { width:25rem; height:25rem; }
.popup .control a.play {display:none;}
.popup .control a::before { content:''; display:block; width:10px; height:16px; background:var(--sprite) -36px -80px; zoom:70%; }
.popup .control a.play::before { background-position-x:-56px;}
.popup .control a.stop::before { width:16px; background-position-x:-76px;}
/*팝업페이징갯수 시작*/
.popup .control.num2 span:nth-of-type(1),
.popup .control.num2 a { margin-left:3rem !important; }
.popup .control.num3 span:nth-of-type(1),
.popup .control.num3 a { margin-left:8rem !important; }
.popup .control.num4 span:nth-of-type(1),
.popup .control.num4 a { margin-left:13rem !important; }
.popup .control.num4 span:nth-of-type(2n) { margin-left:4rem !important; }
.popup .control.num5 span:nth-of-type(1),
.popup .control.num5 a { margin-left:20rem !important; }
.popup .control.num5 span:nth-of-type(2),
.popup .control.num5 span:nth-of-type(5) { margin-left:7rem !important; }
/*팝업페이징갯수 꿑*/
.popup .control span { background:#fff; opacity:1; }
.popup .swiper a { display:flex; align-items:center; justify-content:space-between; position:absolute; left:20rem; bottom:20rem; border-radius:50%; color:#fff; background:var(--blue); width:100rem; height:100rem; font-size:17rem; font-weight:600; padding:0 20rem; line-height:1.2; opacity:0; transition:0.3s; transition-delay:0.2s; z-index:2; }
.popup .swiper .swiper-slide-active a {opacity:1; bottom:30rem; }
.popup .swiper a::after {content:''; flex-shrink:0; display:block; width:8px; height:13px; background:var(--sprite) 0 -80px; margin-top:22rem; }
@media all and (max-width:600px){
    .popup {width:100%;}
    .popup > img {display:none;}
}
@media all and (max-width:480px){
    .popup .swiper a {left:auto; right:0; bottom:0;}
}


.txt_wrap { position:relative; display:flex; flex-direction:row-reverse; font-family:var(--serif); z-index:1; }
.txt_wrap .txt1 { display:flex; flex-direction:row-reverse; }
.txt_wrap .txt1 p { color:var(--p_color); font-size:40rem; font-weight:600; width:50rem; text-align:center; line-height:1.2; animation:txt_wrap 1s cubic-bezier(.55,.085,.68,.53) both; }
.txt_wrap .txt1 strong { font-size:50rem; }
.txt_wrap .txt2 { display:flex; flex-direction:row-reverse; gap:10rem; margin:70rem 30rem 0 0; }
.txt_wrap .txt2 p { display:flex; flex-direction:column; flex-shrink:0; width:20rem; gap:5rem; animation:txt_wrap 1s cubic-bezier(.55,.085,.68,.53) both; animation-delay:.3s;  }
.txt_wrap .txt2 p span,
.txt_wrap .txt2 p strong { text-align:center; line-height:1.2; }
@keyframes txt_wrap {
    0%{filter:blur(12px);opacity:0}
    100%{filter:blur(0);opacity:1}
}
@media all and (max-width:1023px){
    .txt_wrap {flex-direction:row; align-items:center; gap:50rem; }
    .txt_wrap > div,
    .txt_wrap p { display:block !important; }
    .txt_wrap .txt2 {margin:0;}
    .txt_wrap p { width:auto !important; }
    .txt_wrap .txt2 p span, .txt_wrap .txt2 p strong {padding-right:5rem; }
}
@media all and (max-width:768px){
    .txt_wrap {display:block;}
    .txt_wrap .txt2 {text-align:center; padding:20rem 20rem 0; }
    .txt_wrap .txt2 p { display:inline !important; }
}


.cont1 { background-image:url('/design/k-hyo/img/main_bg2.jpg'), url('/design/k-hyo/img/main_bg3.jpg'); background-repeat:no-repeat; background-position:left top, right bottom; padding:70rem 0;}
.cont1 .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; }
.cont1 h2 { width:100%; }
.cont1 .wrap > div { position:relative; width:calc(50% - 40rem); }
.cont1 h3 { font-size:30rem; margin-bottom:20rem; }
@media all and (max-width:1023px){
    .cont1 {padding:40rem 0;}
    .cont1 .wrap > div {width:100%; }
}

.notice .recent { display:flex; align-items:center; justify-content:space-between; border-top:2px solid #333; border-bottom:1px solid #f5f5f5; padding:20rem 0; }
.notice .recent .date { width:90rem; text-align:center; color:#878787; font-size:16rem; }
.notice .recent .date strong {display:block; font-size:40rem; color:var(--p_color); }
.notice .recent dl { width:calc(100% - 110rem);}
.notice .recent dt {font-size:22rem; font-weight:600; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.notice .recent dd { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis; font-size:17rem; line-height:25rem; max-height:50rem; overflow:hidden; margin-top:15rem; }
.notice .list {margin-top:10rem; }
.notice .list a { display:flex; align-items:center; justify-content:space-between; height:40rem; }
.notice .list a::before { content:''; display:block; width:6rem; height:6rem; background:var(--blue); border-radius:50%; margin:0 10rem; }
.notice .list a span:not(.date) { width:calc(100% - 160rem); text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.notice .list a span.date {font-size:16rem; color:#878787; text-align:right; width:130rem; }


.photo .list { display:flex; justify-content:space-between; }
.photo .list a {display:block; width:calc(50% - 20rem); }
.photo .img { width:100%; height:215rem; border-radius:10rem; padding:5rem; border:1px solid #e0e2ea; }
.photo .img img { width:100%; height:100%; object-fit:cover; border-radius:5rem; }
.photo .list .title {font-size:20rem; font-weight:600; margin:20rem 0 10rem; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.photo .list .date {font-size:16rem; color:#878787; }
@media all and (max-width:1023px){
    .photo { margin-top:40rem; }
}
@media all and (max-width:480px){
    .photo { margin-top:40rem; }
    .photo .list {flex-wrap:wrap; gap:30rem; }
    .photo .list a {width:100%;}
    .photo .img {height:auto;}
}


.cont2 { position:relative; border-radius:60rem 60rem 0 0; background:#203768; color:#fff; padding:70rem 0; }
.cont2::before { content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:url('/design/k-hyo/img/main_bg5.jpg') no-repeat center/cover; opacity:0.07; filter:blur(3px); z-index:0; }
.cont2 h2 { color:#fff !important; }
.cont2 .wrap { position:relative; }
.cont2 .wrap > a { position:relative; display:flex; align-items:center; position:absolute; left:0; top:120rem; background:var(--blue); color:#fff; height:55rem; border-radius:30rem; padding:0 3rem; z-index:1; }
.cont2 .wrap > a:nth-of-type(2) { top:190rem; }
.cont2 .wrap > a strong { align-content:center; text-align:center; width:49rem; height:49rem; border-radius:50%; font-size:22rem; }
.cont2 .wrap > a span { display:none; }
.cont2 .wrap > a.on strong { background:#fff; color:var(--blue); }
.cont2 .wrap > a.on span { display:block; padding:0 20rem 0 10rem; }
.cont2 .wrap > div { display:none; align-items:center; gap:50rem; }
.cont2 .wrap > a.on+div {display:flex;}
.cont2 .wrap > a span.mobile { display:none; }

.place_map { position:relative; width:450rem; text-align:center; }
.place_map a {position:absolute; display:flex; align-items:center; justify-content:center; background:var(--p_color); color:#fff; width:40rem !important; height:40rem !important; border-radius:50%;  }
.place_map a.on,
.place_map a:hover { background:var(--orange); z-index:1; }
.place_map a.on::before {content:''; position:absolute; left:-5rem; top:-5rem; width:calc(100% + 10rem); height:calc(100% + 10rem); background:var(--orange); opacity:0.5; border-radius:25rem; z-index:-1;  }
.place_map a.swiper-pagination-bullet {width:auto; height:auto; opacity:1; z-index:1;}
.place_map a.btn1 {left:40%;bottom: 10%;}
.place_map a.btn2 {left: 16%;bottom: 22%;}
.place_map a.btn3 {left: 2%;top: 41%;}
.place_map a.btn4 {left: 5%;top: 13%;}
.place_map a.btn5 {left: 25%;top: 13%;}
.place_map a.btn6 {left: 41%;top: 13%;}
.place_map a.btn7 {left: 71%;top: 38%;}
.place_map a.btn8 {right: 2%;top: 38%;}
.place_swiper { position:relative; width:calc(100% - 500rem); }
.place_swiper .control { display:flex; gap:10rem; position:absolute; right:50rem; top:-25rem; z-index:2; }
.place_swiper .control a { display:flex; align-items:center; justify-content:center; background:var(--blue); border-radius:50%; width:50rem; height:50rem; }
.place_swiper .control a.play { display:none; }
.place_swiper .control a.prev { transform:scaleX(-1); }
.place_swiper .control a::before { content:''; display:block; width:10px; height:16px; background:var(--sprite) -36px -80px; }
.place_swiper .control a.play::before { background-position-x:-56px;}
.place_swiper .control a.stop::before { width:16px; background-position-x:-76px;}
.place_swiper .swiper-wrapper > div { height:520rem; border:1px solid var(--blue); background:#203768; padding:5rem; border-radius:20rem; }
.place_swiper dl {position:absolute; left:20rem; bottom:20rem; width:calc(100% - 40rem); background:rgba(0,0,0,0.6); color:#fff; border-radius:10rem; padding:20rem 40rem; }
.place_swiper dt { font-size:22rem; font-weight:600; margin-bottom:5rem; }
.place_swiper img { border-radius:15rem; width:100%; height:100%; object-fit:cover;}
@media all and (max-width:1200px){
    .place_map {width:350rem; }
    .place_swiper {width:calc(100% - 400rem);}
}
@media all and (max-width:1023px){
    .cont2 {padding:40rem 0;}
    .cont2 .wrap > a { left:auto; right:0; top:0 !important; }
    /*
    .cont2 .wrap > a:first-of-type { right:70rem; }
    .cont2 .wrap > a.on span {display:none;}
    */
    .place_map {display:none;}
    .place_swiper {width:100%;}
    .place_swiper .control {right:0;}
    .place_swiper .swiper-wrapper > div {height:auto;}
}
@media all and (max-width:480px){
    .cont2 .wrap > a { height:45rem; }
    .cont2 .wrap > a span:not(.mobile),
    .cont2 .wrap > a strong { display:none !important; }
    .cont2 .wrap > a span.mobile {display:block; padding:0 20rem;}
    .place_swiper dl {padding:10rem 20rem; width:auto; }
    .place_swiper dt {margin:0; font-size:18rem; }
    .place_swiper dd {display:none;}
}


.place_info { display:flex; justify-content:space-between; margin-top:50rem;}
.place_info dl,
.place_info dl > *,
.place_info .icon {display:flex; align-items:center; }
.place_info dt { font-size:20rem; font-weight:600; }
.place_info dt::after {content:''; display:block; width:1px; height:20rem; background:#fff; opacity:0.2; margin:0 20rem; }
.place_info .icon { justify-content:center; width:60rem; height:60rem; border-radius:10rem; background:var(--blue); margin-right:20rem; }
.place_info .icon::before {content:''; display:block; width:29px; height:30px; background:var(--sprite) 0 -100px; }
.place_info .icon2::before { width:30px; background-position-x:-40px; }
.place_info dd { gap:20rem; }
.place_info dd strong { font-size:20rem; }


.cont3 {position:relative; padding:70rem 0;}
.cont3::before,
.cont3::after { content:''; position:absolute; left:0; width:100%; height:120px; background:url('/design/k-hyo/img/main_bg4.jpg') repeat-x; z-index:-1; }
.cont3::before { top:0; }
.cont3::after { bottom:0; transform:scaleY(-1); }
.cont3 .wrap {position:relative; }
.cont3 .list { display:flex; margin-bottom:50rem; }
.cont3 .list .swiper-slide { display:flex; flex-direction:column; box-shadow:2rem 2rem 10rem rgba(0,0,0,0.05); border:1px solid #f3f3f3; border-radius:20rem; overflow:hidden; }
.cont3 .list .swiper-wrapper {height:auto;}
.cont3 .list dl { flex-grow:1; padding:30rem 20rem 20rem; }
.cont3 .list dt {font-size:22rem; margin-bottom:5rem; font-weight:600; margin-bottom:10rem;  }
.cont3 .list dt span {display:block; font-size:14rem; color:var(--p_color); }
.cont3 .list dt span.type2 {color:var(--orange); }
.cont3 .list dd { font-size:17rem; color:#555; }
.cont3 .list .img { height:200rem; }
.cont3 .list .img img { width:100%; height:100%; object-fit:cover; }
.cont3 .list ul { display:none; flex-direction:column; gap:5rem; padding:20rem 20rem 30rem; }
.cont3 .list li { display:flex; color:#494949; }
.cont3 .list li::before {content:''; flex-shrink:0; display:block; width:4px; height:4px; background:#909090; border-radius:50%; margin:13rem 10rem 0 0; }
.cont3 .list .btn {display:flex; }
.cont3 .list a { align-content:center; width:100%; height:50rem; text-align:center; color:#fff; background:var(--p_color); }
.cont3 .list a:nth-of-type(2) {background:#3e140e; border-left:1px solid rgba(255,255,255,0.3); }
.cont3 .control { position:absolute; top:10rem; right:0; display:flex; align-items:center; gap:10rem; z-index:2; }
.cont3 .control a { display:flex; align-items:center; justify-content:center;width:50rem; height:50rem; background:rgba(0,0,0,0.05); border-radius:50%; }
.cont3 .control a.play { display:none; }
.cont3 .control a.prev { transform:scaleX(-1); }
.cont3 .control a::before { content:''; display:block; width:10px; height:16px; background:var(--sprite) -102px -80px; }
.cont3 .control a.play::before { background-position-x:-122px;}
.cont3 .control a.stop::before { width:16px; background-position-x:-142px;}
@media all and (max-width:1023px){
    .cont3 {padding:40rem 0;}
}
@media all and (max-width:480px){
    .cont3 .control {top:70rem; }
}

.reserve_check {display:flex; justify-content:flex-end; align-items:center; gap:40rem; }
.reserve_check a {display:flex; align-items:center; border:3px solid var(--p_color); color:var(--p_color); font-weight:600; padding:0 40rem; height:50rem; border-radius:25rem; }
@media all and (max-width:480px){
    .reserve_check { flex-direction:column; gap:20rem; text-align:center; }
}