@charset "utf-8";
.mainVisual { position:relative; background-color:#f4f0e3; padding-top:3rem; opacity:0; overflow:hidden;}
.mainVisual .inner_wrap { width:100%; }
.mainVisual .inner_wrap > div { position:relative; height:0; padding-bottom:31.8%;}
.table_wrap { position:absolute; width:63.5%; left:2%; bottom:0; opacity:0; filter: alpha(opacity=0;); transform:matrix(0,0,0,0,0,0); }
.active .table_wrap {opacity:1; filter: alpha(opacity=100;); transition: all 0.5s ease 1s; transform:matrix(1,0,0,1,0,0);}
.table_wrap > img { position:relative; z-index:5;}
.table_con { position:absolute; max-width:540px; width:72%; left:50%; bottom:100%; -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); transform:translateX(-50%); z-index:3;}
.table_con > [class^="table_"] { position:absolute; bottom:0; /*opacity:0; filter: alpha(opacity=0;);*/}
.table_con > [class^="table_"]::after {position:absolute; content:""; width:0; height:20%; right:5%; bottom:0; -webkit-box-shadow: 10px 6px 30px 20px rgba(0,0,0,0.12);box-shadow: 10px 6px 30px 20px rgba(0,0,0,0.12); z-index:-1;}
.active .table_con > [class^="table_"] {}
.table_candle {width:6.5%; left:2%;}
.light { position: absolute; width: 80%;height:16%;left: 10%; bottom: 99%; z-index: 10;}

.light {transform:cale(0.3); transform-origin: center bottom; opacity:0;}
.active .light { animation:0.5s light ease 1 5s; animation-fill-mode: forwards;}

@keyframes light {
 0% {transform:scale(0); opacity:0;}
 100% {transform: scale(1); opacity:1;}
}

.light span {position: absolute; width: 100%;height: 100%; left: 0; bottom: 0; opacity: .9; border-bottom-right-radius: 70%; border-bottom-left-radius: 70%; border-top-left-radius: 70%; background-color: #ff6a00;
	background-image: linear-gradient(to bottom left, rgba(255, 106, 0, 0.1), rgba(255, 200, 0, 0.1));	transform: rotate(-45deg) skew(-10deg, -10deg); z-index: 1;
	animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-name: burn-left;
    animation-duration: 300ms;
}
.light span:first-child {
	box-shadow: 0 0 7px 3px rgba(244,110,28,0.5);
}
.light span:nth-of-type(2) { width: 50%; height: 50%; left: 25%; background-color: #ff6a00; background-image: linear-gradient(to bottom left, #ffc800, #ffffff); z-index: 2;
  animation-name: burn-right; animation-duration: 400ms;
}

.light .flame:nth-of-type(2n) { animation-name: burn-right; animation-duration: 400ms;}

@keyframes burn-left {
  0%, 100% { transform: rotate(-45deg) skew(-10deg, -10deg) scale(1);}
  30%, 60% { transform: rotate(-44deg) skew(-12deg, -12deg) scale(1.01);}
}
@keyframes burn-right {
  0%, 100% { transform: rotate(-45deg) skew(-10deg, -10deg) scale(1); }
  30%, 60% { transform: rotate(-46deg) skew(-6deg, -6deg) scale(1.01); }
}
.table_frame {width:29.02%; left:16%; /*transform: translate(-2%,-16%) rotate(3deg);*/ opacity:0; }
.active .table_frame { animation:1.2s table_frame ease 1 3.5s; animation-fill-mode: forwards;}

@keyframes table_frame {
 0% {transform: translate(-2%,-16%) rotate(3deg); opacity:0;}
  50% {transform: translate(-2%,-16%) rotate(3deg); opacity:1;}
  100% {transform: translate(0, 0) rotate(0deg); opacity:1;}
}

.table_frame .frame { position:relative; z-index:1;}
.fish { position:absolute; width:54%; left:23%; top:15%; animation:1.6s fish ease infinite; transform-origin: center 80%; /*-ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); */ z-index:3 }
.fish img { width:100%; vertical-align:top;}
.fish_tail{ animation:0.6s fish_tail linear infinite; transform-origin: center top; }
/*.fish_body { animation:0.6s fish_body linear infinite; transform-origin: center bottom;}*/
.st1{fill:none;stroke:#EFBB89;stroke-width:3;stroke-miterlimit:10;}
.st2{fill:#45A078;}

.fish_fin01 {transform-origin: right top; animation:0.8s fish_fin linear infinite;}
.fish_fin02 {transform-origin: left top; animation:0.8s fish_fin linear infinite; }

@keyframes fish {
  0%,100% {transform: translate(0.-1.5%) rotate(-2.5deg); }
  50% {transform:translate(0,0) rotate(2.5deg);}
}

@keyframes fish_fin {
  0%,100% {transform: translateY(-0.5%) rotate(-0.3deg);}
  50% {transform: translateY(0.5%) rotate(0.3deg);}
}
@keyframes fish_tail {
  0%,100% {transform: rotate(-3deg);}
  50% {transform: rotate(3deg);}
}

/*@keyframes fish_body {
  0%,100% {transform: rotate(0.5deg);}
  50% {transform: rotate(-0.5deg);}
}*/
.fish img { width:100%; vertical-align:top;}
.table_flower { width:14.1%; left:50%;}
.bowl { position:absolute; width:44%; height:50%; left:0; bottom:0; background-color:rgba(255,255,255,0.8); z-index:3;}

.flower_wrap { position:relative; width:80%; left:10%; transform: translate(10%,-51.5%) rotate(-8deg); opacity:0; }
.active .flower_wrap { animation:1.2s flower_wrap ease 1 6.5s; animation-fill-mode: forwards;}

@keyframes flower_wrap {
  0% {transform: translate(10%,-51.5%) rotate(-8deg); opacity:0;}
  50%, 60% {transform: translate(10%,-51.5%) rotate(-5deg); opacity:1;}
  100% {transform: translate(0, 0) rotate(0deg); opacity:1;}
}
.flower { vertical-align:top; animation:2.5s flower ease infinite; animation-delay:8s; transform: translateY(0) rotate(-1.8deg); transform-origin: left bottom; z-index:2;}
@keyframes flower {
  0%,100% {transform: translateY(0) rotate(-1.8deg); }
  55%,60% {transform: translateY(0) rotate(2.5deg)}
}
.table_warterball { width:21.9%; left:90%; /*transform: translate(-2%,-10%) rotate(-5deg);*/ opacity:0;}
.active .table_warterball { animation:1.2s warterball ease 1 1.5s; animation-fill-mode: forwards;}
@keyframes warterball {
  0% {transform: translate(-2%,-10%) rotate(-5deg); opacity:0;}
  50%, 60% {transform: translate(-2%,-10%) rotate(-5deg); opacity:1;}
  100% {transform: translate(0, 0) rotate(0deg); opacity:1;}
}

.rainbow_wrap { position:absolute; width:70%; left:50%; top:32%; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); z-index:3;}
.rainbow {animation:15s rainbow ease infinite; transform-origin: center bottom;}
@keyframes rainbow {
  0%, 100% {transform: translateY(0) scale(0.9); opacity:0;}
  30%, 90% {transform: translateY(0) scale(1); opacity:1;}
}

.table_diffuser {width:14.8%; left:90%;}

.cdPlayer_wrap { position:absolute; width:35%; left:65%; bottom:-100%;}
.active .cdPlayer_wrap { bottom:0;  transition: all 0.3s cubic-bezier(0.694, 0, 0.335, 1) 2.5s}

.cd_wrap { position:absolute; max-width:258px; width:62%; left:50%; top:5%; -ms-transform:translate(-50%,-20%); -webkit-transform:translate(-50%,-20%); transform:translate(-50%,-20%); opacity:0; z-index:3;}
@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none){.cd_wrap{left:32%;}}
.active .cd_wrap { animation:1.8s cd_wrap ease 3.5s; animation-fill-mode: forwards;}
@keyframes cd_wrap {
  0% {transform: translate(0%,-20%); opacity:0;}
  55%, 65% {transform: translate(0,-20%); opacity:1;}
  100% {transform: translate(-50%,0); opacity:1;}
}

.chan_cd { width:100%; vertical-align:top;  }
.active .chan_cd {animation:3.2s chan_cd linear 5.5s infinite; }
@keyframes chan_cd {
  0% {transform: translateY(0) rotate(0deg);}
  100% {transform: translateY(0) rotate(360deg);}
}

@media  (max-width: 1024px){
.mainVisual .inner_wrap { width:106%; left:-5%;}
.table_wrap { width:68%;}
}

.mainCon {}
.mainCon .inner_wrap { width:100%; }
.mainList_wrap { position:relative; border-bottom:0.9em solid #d69e6c; margin-top:5%;}
.mainList_wrap::after {content:"";display:block;clear:both;}
.mainList_wrap .mainList_title {position:absolute; width:23%; left:3.4%; bottom:0; text-align:center;}
.mainList_wrap .mainList_title .title_img {position:relative; width:57%; padding:7%; background-color:#fff; border:0.6em solid #eeba88; z-index:3;}
.mainList_wrap .mainList_title .title_img .inner_wrap {position:relative; background-color:#f4efe2; overflow:hidden;}
.title_img_img {position:relative; width:100%; vertical-align:top; z-index:3;}
.solo_mic {position:absolute; width:70%; right:-1%; top:27.5%; animation:3.6s solo_mic ease infinite; transform-origin:80% 80%; z-index:1;}
.group_light {position:absolute; width:70%; left:15%; top:0; animation:3.2s group_light linear infinite; opacity:0; z-index:1;}
.book_bookmark {position:absolute; width:15%; right:19%; bottom:50%; animation:2.6s bookmark ease infinite; transform-origin:80% 80%; z-index:4;}
@keyframes solo_mic {
  0%, 80% {transform: rotate(0deg);}
  25%,60% {transform: rotate(10deg);}
}
@keyframes group_light {
  0%, 90% {opacity:0;}
  35%,80% {opacity:1;}
}
@keyframes bookmark {
  0%, 80% {transform: translateY(0) rotate(0deg);}
  16%,60% {transform: translateY(-20%) rotate(5deg);}
}
.mainList_wrap .mainList_title .title_text { position:absolute; width:43%; height:53%; right:0; bottom:0; background-color:#459f78; box-shadow:0 3px 10px rgba(0,0,0,0.3); z-index:1;}
.mainList_wrap .mainList_title .title_text::before {position:absolute; content:""; width:96%; height:92%; border:2px solid rgba(255,255,255,0.6); border-left:0; left:0; top:4%; z-index:2; }
.mainList_wrap .mainList_title .title_text span { position:absolute; width:70%; left:15%; top:50%; text-align:left; -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); transform:translateY(-50%);font-family: 'Open Sans', sans-serif; font-size:1.6em; line-height:1.5em; text-transform:uppercase; color:#fff; font-weight:700; text-shadow:0 0 30px rgba(255,255,255,0.5); }
.mainList_wrap .mainList {position:relative; float:right; width:68%; padding:5%; background-color:#f4f0e3;}
.mainList_wrap .mainList .albumList_con{ padding:0 1.5%;}
.mainList_wrap .mainList .albumList_con a { position:relative; display:block; border:1px solid #459f78; background-color:#000;}
.mainList_wrap .mainList .ch_title { position:absolute; width:80%; left:10%; bottom:-5%; font-size:1.05em; line-height:1.5em; color:#fff; opacity:0; z-index:2;}
.mainList_wrap .mainList .ch_ca_img { position:relative; z-index:1;}
.ch_title, .ch_title {-webkit-transition: all 0.3s cubic-bezier(0.694, 0, 0.335, 1); -moz-transition: all 0.3s cubic-bezier(0.694, 0, 0.335, 1); -ms-transition: all 0.3s cubic-bezier(0.694, 0, 0.335, 1); -o-transition: all 0.3s cubic-bezier(0.694, 0, 0.335, 1); transition: all 0.3s cubic-bezier(0.694, 0, 0.335, 1);}
.mainList_wrap .mainList .albumList_con a:hover .ch_ca_img { opacity:0.5;}
.mainList_wrap .mainList .albumList_con a:hover .ch_title { opacity:1; bottom:10%;}
.albumList_con a img { width:100%; vertical-align:top;}

.mainList_arrow [class^="mainList_"] { position:absolute; top:50%; -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); transform:translateY(-50%); font-size:1.3em; line-height:1.2em; color:#fff; cursor:pointer; outline:none;}
[class^="mainList_prev"] { left:3%;}
[class^="mainList_next"] { right:3%;}


@media  (max-width: 1024px){
.mainList_wrap { border-bottom:1.5vw solid #d69e6c; margin-top:6%;}
.mainList_wrap .mainList_title { width:26%; left:3%;}
.mainList_wrap .mainList_title .title_img { padding:6%; border:0.8vw solid #eeba88;}
.mainList_wrap .mainList_title .title_text span { font-size:2vw;}
@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none){.cd_wrap{left:36%;}}
}
@media  (max-width: 768px){
.mainList_wrap { border-bottom:1.8vw solid #d69e6c; margin-top:8%;}
.mainList_wrap .mainList_title .title_text::before { border:1px solid rgba(255,255,255,0.6); border-left:0;}
.mainList_wrap .mainList_title { width:28%; left:2%;}
.mainList_wrap .mainList_title .title_img { padding:5%; border:1.2vw solid #eeba88;}
.mainList_wrap .mainList_title .title_text span { 90%; left:8%; font-size:2.6vw;}
.ch_title { font-size:0.85em;}
[class^="mainList_prev"] { left:1%;}
[class^="mainList_next"] { right:1%;}
}


/* 팝업레이어 */
#hd_pop {z-index:50;position:absolute;margin:0 auto;height:0; top:0;}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff;cursor:move;}
.hd_pops img{max-width:100%}
.hd_pops_con {}
.hd_pops_footer {padding:5px 0;background:#32343e;color:#A39B97;font-size:13px;line-height:24px;lietter-spaicng:-1px;text-align:right}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button {margin-right:5px;padding:0 0;font-size:11px;line-height:24px;border:0;background:none;color:#A39B97}
.hd_pops_footer button:hover {color:#777;}
.hd_pops_footer .hd_pops_reject{background:none;text-align:left; margin-left:10px;}
.hd_pops_footer .hd_pops_close{background:none;margin-right:0px; margin-right:5px;}

@media  (max-width: 1024px){
#hd_pop {margin:0 auto;width:100%;height:0px}
#hd_pop h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops_con { width:320px !important; height:auto !important;}
.hd_pops img{max-width:100%;height:auto}
.hd_pops_footer {padding:0 0;background:#32343e;color:#A39B97;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 0;border:0;background:none;color:#A39B97}
.hd_pops_footer button:hover {color:#777}
}

.single_wrap { width:100%;background-color:#fff; font-family: 'RIDIBatang'; font-size:1em; font-weight:600; color:#676767; text-align:center;}
.single_wrap .albumList_con { }
.single_wrap .albumList_con a {border:none;}
.single_wrap .albumList_con .ch_ca_img {}
.single_wrap .ch_title {margin-top:1.3em;}
.single_wrap .albumList_con a span {display:block;  }
.single_wrap .ch_title .ch_ca_data {font-size:0.9em; color:#999; margin:1em 0 0;}


#hd_pops_1, #hd_pops_2 { width:220px; left:inherit !important; background-color:transparent; right:3%; top:calc(6em + 3rem) !important;border:none; z-index:8; }	
#hd_pops_1 .hd_pops_con, #hd_pops_2 .hd_pops_con {width:220px !important; padding:10px 10px 5%; border:none; background-color:#fff; box-shadow:0 0 5px rgba(0,0,0,0.1);}
#hd_pops_1 .hd_pops_footer, #hd_pops_2 .hd_pops_footer { background-color:transparent; color:#999; padding:0;}
#hd_pops_1 .hd_pops_footer .hd_pops_reject, #hd_pops_2 .hd_pops_footer .hd_pops_reject{float:left;margin-left:0;}
#hd_pops_1 .hd_pops_footer .hd_pops_close, #hd_pops_2 .hd_pops_footer .hd_pops_close{margin-right:0; font-size:28px;}
#hd_pops_1 .hd_pops_footer button, #hd_pops_2 .hd_pops_footer button {margin-right:0;padding:5px 0;}

@media  (max-width: 768px){
#hd_pops_1, #hd_pops_2 { width:180px; right:10px; top:50vh !important; -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); transform:translateY(-50%); }
#hd_pops_1 .hd_pops_con, #hd_pops_2 .hd_pops_con {width:180px !important;}
#hd_pops_1 .hd_pops_footer, #hd_pops_2 .hd_pops_footer {background-color:rgba(0,0,0,0.8); padding:0 5px;}
.single_wrap .ch_title {margin-top:1em;}
.ch_ca_subject { letter-spacing:-0.1em;}
}