@charset "utf-8";

:root {
	--sprite_main: url('/WebContent/design/sunbeeworld/img/main/main_sprite.png') no-repeat;
}

#containter {overflow:hidden;}

/*character*/
.character_wrap { position:absolute; transform:scale(0.9);}
.character_wrap .word { position:absolute; right:190rem; top:-30rem; width:255rem; height:210rem; background:url('/WebContent/design/sunbeeworld/img/main/word_wrap_1.png') no-repeat center; align-content:center; text-align:center; font-family:var(--flight); font-size:20rem; padding:0 30rem; line-height:1.3; }
.character_wrap .word strong {font-size:25rem; }
.character_wrap.wrap0 { right:20rem; bottom:-100rem; z-index:2; }
.character_wrap.wrap0 .ho_wrap {position:relative; }
.character_wrap.wrap0 .ho_wrap .ho { animation: moveUpDown2 3s ease-in-out infinite; }
.character_wrap.wrap0 .ho_wrap .shadow {position:absolute; left:50%; bottom:-60rem; transform:translateX(-50%);animation: moveUpDown_shadow 3s ease-in-out infinite; }
.character_wrap.wrap1 { left:20rem; bottom:-100rem; z-index:2; }
.character_wrap.wrap1 .word { animation: scale-in-right 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation-delay: 1.2s; }
.character_wrap.wrap1 .word strong { color:var(--red); }
/*
.character_wrap.wrap1 .bok  { animation: slide-in-blurred-bottom 0.4s cubic-bezier(0.230, 1.000, 0.320, 1.000) both; animation-delay: 0.8s; }
.character_wrap.wrap1 .sik {position:absolute; right:220rem; bottom:-40rem; animation: slide-in-blurred-bottom 0.4s cubic-bezier(0.230, 1.000, 0.320, 1.000) both; animation-delay: 0.5s;}
*/
.character_wrap.wrap1 .bok_wrap {position:relative; }
.character_wrap.wrap1 .bok_wrap .bok { animation: moveUpDown 3s ease-in-out infinite; }
.character_wrap.wrap1 .bok_wrap .shadow {position:absolute; left:50%; bottom:-60rem; transform:translateX(-50%);animation: moveUpDown_shadow 3s ease-in-out infinite; }
.character_wrap.wrap1 .sik_wrap { position:absolute; left:220rem; bottom:-40rem; }
.character_wrap.wrap1 .sik_wrap .sik { max-width:none; animation: moveUpDown 3s ease-in-out infinite; animation-delay: 0.5s;}
.character_wrap.wrap1 .sik_wrap .shadow {position:absolute; left:50%; bottom:-60rem; transform:translateX(-50%); animation: moveUpDown_shadow 3s ease-in-out infinite; animation-delay: 0.5s; }
.character_wrap.wrap2 { left:-230rem; bottom:50rem;}
/*
.character_wrap.wrap2 .word { right:-145rem; top:20rem; width:240rem; height:200rem; background:url('/WebContent/design/sunbeeworld/img/main/word_wrap_2.png') no-repeat center; }
.character_wrap.wrap2.move { left:-200rem; animation: slide-in-fwd-left 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
.character_wrap.wrap2.move .word { animation: scale-in-left 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation-delay: 0.6s; }
*/
.character_wrap.wrap2 .rak {animation: moveUpDown 3s ease-in-out infinite;animation-delay: 0.2s; }
.character_wrap.wrap2 .shadow { position:absolute; left:55%; bottom:-60rem; transform:translateX(-50%);animation: moveUpDown_shadow 3s ease-in-out infinite;animation-delay: 0.2s;}
.character_wrap.wrap3 { right:-350rem; top:-300rem;}
/*
.character_wrap.wrap3.move { right:-300rem; animation: slide-in-fwd-right 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }
.character_wrap.wrap3.move .word { animation: scale-in-right 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation-delay: 0.6s; }
*/
.character_wrap.wrap3 .ok {animation: moveUpDown2 3s ease-in-out infinite;animation-delay: 0.6s; }
.character_wrap.wrap3 .shadow { position:absolute; left:45%; bottom:-60rem; transform:translateX(-50%);animation: moveUpDown_shadow 3s ease-in-out infinite;animation-delay: 0.6s;}
.character_wrap.wrap4 {position:unset; }
.character_wrap.wrap4 .jini { position:absolute; left:-500rem; bottom:-1200rem; }
.character_wrap.wrap4 .gri { position:absolute; right:-400rem; bottom:-1200rem; }
.character_wrap.wrap4.move .jini { bottom:35rem; animation: slide-in-blurred-top 0.3s cubic-bezier(0.230, 1.000, 0.320, 1.000) both; animation-delay: 1s;  }
.character_wrap.wrap4.move .gri { bottom:35rem; animation: slide-in-blurred-top 0.3s cubic-bezier(0.230, 1.000, 0.320, 1.000) both; animation-delay: 1.3s;  }
/*character animation*/
@keyframes scale-in-right {
	0% {
		transform: scale(0);
		transform-origin: 100% 50%;
		opacity: 1;
	}
	100% {
		transform: scale(1);
		transform-origin: 100% 50%;
		opacity: 1;
	}
}
@keyframes slide-in-blurred-bottom {
  0% {
	transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
	transform-origin: 50% 100%;
	filter: blur(40px);
    opacity: 0;
  }
  100% {
	transform: translateY(0) scaleY(1) scaleX(1);
	transform-origin: 50% 50%;
	filter: blur(0);
    opacity: 1;
  }
}
@keyframes slide-in-fwd-left {
  0% {
	transform: translateZ(-1400px) translateX(-230px);
    opacity: 0;
  }
  100% {
	transform: translateZ(0) translateX(0);
    opacity: 1;
  }
}
@keyframes scale-in-left {
	0% {
		transform: scale(0);
		transform-origin: 0% 50%;
		opacity: 1;
	}
	100% {
		transform: scale(1);
		transform-origin: 0% 50%;
		opacity: 1;
	}
}
@keyframes slide-in-fwd-right {
  0% {
	transform: translateZ(-1400px) translateX(1000px);
    opacity: 0;
  }
  100% {
	transform: translateZ(0) translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-blurred-top {
  0% {
	transform: translateY(200px);
    opacity: 0;
  }
  100% {
	transform: translateY(0) ;
    opacity: 1;
  }
}
@keyframes moveUpDown {
    0% {
        transform: translate(0%, 0%)
    }

    50% {
        transform: translate(-2%, -4%)
    }

    100% {
        transform: translate(0%, 0%)
    }
}
@keyframes moveUpDown2 {
    0% {
        transform: translate(0%, 0%)
    }

    50% {
        transform: translate(2%, -4%)
    }

    100% {
        transform: translate(0%, 0%)
    }
}
@keyframes moveUpDown_shadow {
    0% {
        transform: translateX(-50%) scaleX(100%)
    }

    50% {
        transform: translateX(-45%) scaleX(60%)
    }

    100% {
        transform: translateX(-50%) scaleX(100%)
    }
}
/*title*/
.content_title {font-family:var(--flight); font-weight:600; font-size:60rem; text-align:center; margin:150rem auto 60rem; line-height:1.3; }
.content_title p { font-family:var(--nanum); font-size:0.4em; margin-top:20rem; }
/*more_btn*/
.circle_icon {display:inline-flex; align-items:center; justify-content:center; width:50rem; height:50rem; border-radius:50%;}
.circle_icon::before {content:''; display:block; width:10rem; height:10rem; border-top:5rem solid #fff; border-right:5rem solid #fff; transform:rotate(45deg); border-radius:0 3rem 0 0; margin-right:3rem; }
@media all and (max-width:1700px){
	.character_wrap {zoom:70% !important;}
}
@media all and (max-width:1600px){
	.character_wrap.wrap4 {display:none;}
}
@media all and (max-width:1500px){
	.character_wrap {display:none;}
}
@media all and (max-width:1200px){
	.content_title {font-size:50rem; margin:100rem auto 50rem;}
}
@media all and (max-width:768px){
	.content_title {font-size:40rem; margin:70rem auto 30rem;}
	.circle_icon{zoom:80%;}
}
@media all and (max-width:480px){
	.content_title {font-size:35rem;}
	.content_title strong { display:block;}
	.content_title p {display:none;}
}


.visual_wrap {position:relative;}
.visual_wrap .visual_mask {position:absolute; left:0; bottom:-1px; width:100%; z-index:2;}
.visual_wrap .control { display:flex; align-items:center; position:absolute; left:50%; bottom:-35rem; transform:translateX(-50%); z-index:2; }
.visual_wrap .control a.stop,
.visual_wrap .control a.play { display:flex; align-items:center; justify-content:center; width:70rem; height:70rem; background:#fff; border-radius:50%; background:#fff; box-shadow:0 0 15rem rgba(0,0,0,0.2); margin-right:15rem; }
.visual_wrap .control a.stop::before,
.visual_wrap .control a.play::before { content:''; display:block; width:20px; height:22px; background:var(--sprite_main) -58px 0;}
.visual_wrap .control a.play {display:none;}
.visual_wrap .control a.play::before { width:16px; background-position-x:-32px;}
.visual_wrap .control .paging { display:flex; align-items:center; height:70rem; border-radius:35rem; background:#fff; box-shadow:0 0 15rem rgba(0,0,0,0.2); padding: 0 35rem; }
.visual_wrap .control .paging .swiper-pagination-bullet { width:12rem; height:12rem; border-radius:50%; background:#bcbcbc; opacity:1; margin-left:20rem; }
.visual_wrap .control .paging .swiper-pagination-bullet:first-of-type {margin-left:0; }
.visual_wrap .control .paging .swiper-pagination-bullet-active { position:relative; width:55rem; border-radius:6rem; overflow:hidden; }
.visual_wrap .control .paging .swiper-pagination-bullet-active .progress { position:absolute; left:0; top:0; width:0; height:100%; background:#222; transition:width 0s;}
.swiper-control {display:none;}
.visual_wrap .swiper-slide img {width:100%;} 
@media all and (max-width:1023px){
	.visual_wrap .control { transform:translateX(-50%) scale(0.8); }
}
@media all and (max-width:768px){
	.visual_wrap .control {bottom:-25rem;}
	.visual_wrap .control .paging { height:50rem; }
	.visual_wrap .control a.stop, .visual_wrap .control a.play { width:50rem; height:50rem; }
	.visual_wrap .control { transform:translateX(-50%) scale(0.7);}
}
@media all and (max-width:480px){
	.visual_wrap .visual_mask { max-width:none; width:500px; left:50%; transform:translateX(-50%); }
}


.map_wrap { position:relative; }
.infomation { position:absolute; left:15rem; top:10rem; width:300rem; z-index:2; }
.infomation .title { font-family:var(--flight); font-weight:600; font-size:30rem; text-align:center; }
.infomation .timer { display:flex; justify-content:space-between; margin:20rem 0;}
.infomation .timer .time { display:flex; justify-content:space-between; width:calc((80% - 30rem)/2); }
.infomation .timer .time span { align-content:end; padding-left:5rem;}
.infomation .timer .time strong { display:flex; align-items:center; justify-content:center; width:calc((100% - 5rem)/2); font-size:35rem; font-weight:600; border:1px solid var(--red); border-radius:10rem; color:var(--red); line-height:1.3; }
.infomation .timer .time:first-of-type { width:20%; }
.infomation .timer .time:first-of-type strong { width:100%; }
.infomation .timer .time strong:nth-of-type(2) {margin-left:5rem;}
.infomation .open_hours div { position:relative; display:flex; align-items:center; justify-content:space-between; height:40rem; }
.infomation .open_hours div::before {content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; border-bottom:1px dashed var(--brown); opacity:0.4; }
.infomation .open_hours div span:last-of-type {font-weight:600; color:var(--brown); }
.infomation .open_hours div.close span:last-of-type { color:var(--p_color);}
.infomation .open_hours div.close_info { justify-content:flex-end; font-size:0.8em;}
.infomation .open_hours div.close_info::before {display:none;}
.infomation a {display:flex; align-items:center; justify-content:center; height:50rem; background:var(--yellow); color:var(--brown); font-weight:600; border-radius:10rem; margin-top:10rem;  }
.infomation a.reseve {background:var(--blue); color:#fff; }
.infomation a::before {content:''; display:block; width:22px; height:23px; background:var(--sprite_main) 0 0; margin-right:10rem; }
.infomation a.reseve::before {width:20px; height:22px; background-position:-302px 0;}
@media all and (max-width:768px){
	.infomation { position:unset; width:100%; margin-bottom:30rem; background:rgba(255,255,255,0.8); padding:30rem; border-radius:40rem; }
	.infomation .title {font-size:25rem;}
	.infomation .timer .time strong { line-height:1.6; font-size:25rem; }
}

#map { width:100%; max-height:920rem; height:100vh; border-radius:40rem; overflow:hidden; }
#zoom-hint { display:flex; align-items:center; position:absolute; right:10rem; top:10rem; font-size:0.8em; background:rgba(240,240,240,0.8); padding:10rem 20rem; border-radius:30rem; }
#zoom-hint > div:first-of-type {display:flex; align-items:center; font-weight:600; font-size:18rem; margin-right:10rem; }
#zoom-hint > div:first-of-type span { padding:0 5rem; }
#info-panel { display:none; flex-direction:column; justify-content:space-between; position: absolute; left:20rem; top:50%; transform:translateY(-50%); z-index:20; width:480rem; height:80%; background:#fff; box-shadow:5rem 5rem 5rem rgba(0,0,0,0.2); border-radius:20rem; padding:20rem; }
#info-content { margin-bottom:20rem; overflow-y:auto; }
#info-panel .map_swiper { position:relative; overflow:hidden; border-radius:10rem; }
#info-panel .map_swiper .control a { display:flex; align-items:center; justify-content:center; position:absolute; right:10rem; top:50%; width:25rem; height:25rem; border-radius:50%; background:#fff; z-index:2; opacity:0.8; transform:translateY(-50%); }
#info-panel .map_swiper .control a.prev { right:auto; left:10rem; transform:translateY(-50%) scaleX(-1); }
#info-panel .map_swiper .control a::before { content:''; display:block; width:5rem; height:5rem; border-top:3px solid #000; border-right:3px solid #000; transform:rotate(45deg); margin-right:2rem; border-radius:1rem; }
#info-panel dt {font-size:23rem; font-weight:600; margin:20rem 0; }
#info-panel dt span {color:var(--red); margin-right:5rem;}
#info-panel dt span::before { content:'[';}
#info-panel dt span::after { content:']';}
#info-panel dd p {font-size:20rem; font-weight:600; }
#info-panel a.link { position:absolute; left:20rem; bottom:20rem; text-align:left; border:0; cursor:pointer; background:transparent; font-size:18rem; color:var(--brown); font-weight:600; }
#info-panel a.link .circle_icon { background:var(--brown); margin-right:10rem; }
#close-btn { display:inline-flex; align-items:center; justify-content:center; width:50rem; height:50rem; border-radius:50%; background:#333; border:0; cursor:pointer; }
#close-btn::before {content:'X'; color:#fff; font-weight:600; font-size:20rem;  }
@media all and (max-width:1023px){
	#zoom-hint { display:none; }
}
@media all and (max-width:768px){
	#map { height:70vh; }
	#info-panel { position:fixed; height:80vh; }
}
@media all and (max-width:480px){
	#info-panel { left:3%; width:96%; }
}
.marker { position:relative; width:20rem; height:20rem; border-radius:50%; box-shadow:0 0 10rem rgba(0,0,0,0.5); }
.marker::after {content:''; position:absolute; left:50%; top:50%; width:100%; height:100%; border-radius:50%; transform:translate(-50%, -50%); animation: pulse 1.5s ease-out infinite; }
.marker.blue,
.marker.blue::after { background:#1faee4; }
.marker.red,
.marker.red::after { background:#f05761; }
.marker.yellow,
.marker.yellow::after { background:#fcaf17; }
.marker.green,
.marker.green::after { background:#21b250; }
.marker.brown,
.marker.brown::after { background:#937853; }
.marker.purple,
.marker.purple::after { background:#a16ea5; }
.marker.orange,
.marker.orange::after { background:#f58220; }
.marker.navy,
.marker.navy::after { background:#445299; }
@keyframes pulse {
	0% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 0.8;
	}
	70% {
		transform: translate(-50%, -50%) scale(2.5);
		opacity: 0;
	}
	100% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 0;
	}
}


.news_wrap { position:relative; display:flex; justify-content:space-between; width:1230rem; max-width:96%; margin:100rem auto 0; }
.news_wrap .news_swiper { position:relative; width:calc((100% - 60rem)/3); border-radius:30rem; box-shadow:0 0 15rem rgba(0,0,0,0.2); overflow:hidden; background:#fff; }
.news_wrap .news_swiper .control a { display:flex; align-items:center; justify-content:center; position:absolute; right:10rem; top:110rem; width:35rem; height:35rem; border-radius:50%; background:#fff; z-index:2; opacity:0.8; }
.news_wrap .news_swiper .control a.prev { right:auto; left:10rem; transform:scaleX(-1); }
.news_wrap .news_swiper .control a::before { content:''; display:block; width:7rem; height:7rem; border-top:3px solid #000; border-right:3px solid #000; transform:rotate(45deg); margin-right:2rem; border-radius:1rem; }
.news_wrap .news_img {position:relative; height:250rem; background:#eeeae6; }
.news_wrap .news_img img:not(.thumb_mask) {width:100%; height:100%; object-fit:cover; }
.news_wrap .news_img .thumb_mask { position:absolute; left:0; bottom:0; width:100%; z-index:1; }
.news_content {text-align:center; padding:30rem; }
.news_content dt p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow:hidden; font-size:25rem; font-weight:600; line-height:35rem; height:70rem; margin:5rem auto 15rem; }
.news_content dd.cont { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow:hidden; line-height:30rem; height:60rem; margin-bottom:20rem; }
.news_wrap .circle_icon {background:#ccc;}
@media (max-width:900px) and (min-width:481px){
	.news_wrap {flex-direction:column; }
	.news_wrap .news_swiper {width:100%; margin-top:30rem;}
	.news_wrap .news_swiper a {display:flex; }
	.news_wrap .news_img { width:50%; height:340rem; }
	.news_wrap .news_img .thumb_mask { display:none;  }
	.news_wrap .news_content { width:50%; }
	.news_wrap .news_swiper .control a { right:calc(50% + 10rem); top:50%; transform:translateY(-50%); }
	.news_wrap .news_swiper .control a.prev { transform:translateY(-50%) scaleX(-1); }
}
@media all and (max-width:768px){
	.news_wrap { margin:40rem auto 0; }
}
@media all and (max-width:480px){
	.news_wrap {flex-wrap:wrap; }
	.news_wrap .news_swiper {width:100%; margin-top:30rem; }
	.news_wrap .news_img {height:200rem;}
	.news_content {padding:20rem;}
	.news_content dt p {font-size:20rem; line-height:30rem;}
	.news_content dd.cont {display:none;}
	.news_content dd.taR {display:none;}
}


.sns_wrap {position:relative; padding-bottom:20rem; }
.sns_swiper { overflow:hidden; padding-top:15rem; }
.sns_swiper .img { height:405rem; background:#fff; border-radius:var(--common_radius); box-shadow:0 0 15rem rgba(0,0,0,0.2); overflow:hidden; }
.sns_swiper a:nth-of-type(2n) .img { height:335rem; margin-top:70rem; }
.sns_swiper .img img {width:100%; height:100%; object-fit:cover; transition:0.3s;}
.sns_swiper .tit { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 600; font-size:1.2em; margin:20rem 0 10rem; overflow:hidden;  text-overflow:ellipsis; }
.sns_swiper .txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;  text-overflow:ellipsis; }
.sns_swiper a:hover img { transform:scale(1.2); }
.sns_link { display:flex; justify-content:center; margin-top:50rem; }
.sns_link a {display:flex; align-items:center; justify-content:center; width:70rem; height:70rem; background:#fff; border-radius:50%; box-shadow:0 0 15rem rgba(0,0,0,0.2); margin-left:15rem;  }
.sns_link a:first-of-type {margin-left:0; }
.sns_link a::before { content:''; display:block; background:var(--sprite_main); }
.sns_link a.insta::before { width:34px; height:34px; background-position:-88px 0;}
.sns_link a.naver::before { width:38px; height:35px; background-position:-132px 0;}
.sns_link a.youtebe::before { width:38px; height:27px; background-position:-180px 0;}
.sns_link a.kakao::before { width:38px; height:40px; background-position:-228px 0;}
.sns_link a.facebook::before { width:16px; height:35px; background-position:-276px 0;}
.sns_link a.prev::before,
.sns_link a.next::before { width:11rem; height:11rem; border-left:4px solid #222; border-top:4px solid #222; transform:rotate(-45deg); background:none; margin-left:5rem; }
.sns_link a.next::before {transform:rotate(135deg); margin-left:0; margin-right:5rem; }
@media all and (max-width:768px){
	.sns_link {margin-top:30rem;}
	.sns_link a { width:50rem; height:50rem; margin-left:8rem;  }
	.sns_link a::before {transform:scale(0.7); }
	.sns_link a.prev::before,
	.sns_link a.next::before { width:9rem; height:9rem; }
}