@charset "utf-8";

.subVisual {position:relative; background-position:center center !important; background-repeat:no-repeat !important; background-size:cover !important;  opacity:0; overflow:hidden;}
@media  (max-width: 1024px){.subVisual {width:130%; left:-15%;}}
@media  (max-width: 460px){.subVisual {width:140%; left:-20%;}}
.subVisual_01 {/*background-image:url(../images/art/01.png);*/ background-color:#459f78;}
.subVisual_02 {/*background-image:url(../images/art/02.png);*/ background-color:#d69e6c;}
.subVisual_03 {/*background-image:url(../images/art/03.png);*/ background-color:#d4f1e4;}
.subVisual_04 {/*background-image:url(../images/art/04.png);*/ background-color:#f8d68b;}
.subVisual_05 {/*background-image:url(../images/art/05.png);*/ background-color:#f4efe2;}

.subVisual .inner_wrap { position:relative; max-width:1200px; width:100%; margin:0 auto; /*background-color:rgba(0,0,0,0.1);*/ z-index:3;}

.subArt {position:relative width:100%; height:0; padding-bottom:15%; z-index:3;}
.subArt_ {}
.subArt .typo {position:absolute; font-family: 'RIDIBatang'; font-size:1.5em; line-height:1.2em; font-weight:500; letter-spacing:0.215em; left:50%; top:36%; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); z-index:11;}
.subArt .typo .letter { float:left; display:inline-block; opacity:0; transform:translateY(-10px) scale(0.9);}
.subArt_01 .typo { position:absolute; color:#f8d68b;}
.subArt_02 .typo { position:absolute; color:#fff;}
.subArt_03 .typo { position:absolute; color:#45a078; top:53%;}
.subArt_04 .typo { position:absolute; color:#666;}
.subArt_05 .typo { position:absolute; color:#45a078;}
@media  (max-width: 1200px){.subArt .typo{ font-size:1.8vw; letter-spacing:0.1em;}}
@media  (max-width: 1024px){.subArt .typo{ font-size:2.5vw;}}
@media  (max-width: 460px){.subArt .typo{ font-size:3.2vw; letter-spacing:0em;}}
.subArt img, .wave img, .table img {width:100%; height:auto; vertical-align:top;}
.subArt div { line-height:0;}

/* 01*/
[class^="star_"] { animation:2.5s star ease infinite; transform: scale(0.7); opacity:0.4; transform-origin: center center; z-index:2;}
@keyframes star {
  0%, 100% {transform: scale(0.7); opacity:0.4;}
  40%, 80% {transform: scale(1); opacity:1;}
}
[class^="circle_"] { animation:2.5s circle ease infinite; transform: scale(0.4); opacity:0.2; transform-origin: center center; z-index:2;}
@keyframes circle {
  0%, 10% {transform: scale(0.4); opacity:0.2;}
  40%, 80% {transform: scale(0.9); opacity:1;}
}
[class^="diamond_"] { animation:2.5s diamond ease infinite; transform: scale(0.4); opacity:0.2; transform-origin: center center; z-index:2;}
@keyframes diamond {
  0%, 10% {transform: rotate(0deg) scale(0.4); opacity:0.2;}
  40%, 80% {transform: rotate(360deg) scale(1); opacity:1;}
}


.moon_01 {position:absolute; width:21.6667%; height:72.8%; left:14%; top:16%;}
.moon_01 .diamond_01 { position:absolute; width:5%; left:1%; top:21.8%; animation-duration: 2.8s;}
.moon_01 .diamond_02 { position:absolute; width:3%; right:9%; top:42%;animation-duration: 2.4s;}
.moon_01 .star_01 { position:absolute; width:7.8%; left:19.8%; top:0%; animation-delay:0.3s; animation-duration: 2.7s;}
.moon_01 .star_02 { position:absolute; width:7.8%; left:79%; top:0%; animation-delay:0.5s;}
.moon_01 .star_03 { position:absolute; width:7.8%; left:31%; top:28%;}
.moon_01 .star_04 { position:absolute; width:7.8%; right:-1%; top:18%; animation-delay:0.4s; animation-duration: 2.9s;}
.moon_01 .circle_01 { position:absolute; width:3.3%; left:13.2%; top:35%;}
.moon_01 .circle_02 { position:absolute; width:2.1%; left:46%; top:8%; animation-duration: 2.2s;}
.moon_01 .circle_03 { position:absolute; width:3.6%; right:27%; top:29%; animation-duration: 2.8s;}
.moon_01 .boat {position:absolute;width: 54%;left: 31%;bottom: 1%; z-index:10;}

.moon_02 {position:absolute; width:21.6667%; height:40%; right:14.4%; top:15%;}
.moon_02 .diamond_01 {position:absolute;width: 3.2%;left: 10%;top: 2.8%;}
.moon_02 .diamond_02 {position:absolute;width: 5%;right: 0%;top: 35%;animation-duration: 2.9s;}
.moon_02 .star_01 {position:absolute;width:7.8%;left: 0%;top: 30%;animation-delay:0.2s;}
.moon_02 .star_02 {position:absolute;width:7.8%;left: 14%;top: 63%;animation-delay:0.35s;animation-duration: 2.9s;}
.moon_02 .star_03 {position:absolute;width:7.8%;left: 62%;top: 13%;animation-delay:0.55s;animation-duration: 2.8s;}
.moon_02 .star_04 {position:absolute;width:7.8%;right: 19%;top: 64%;animation-delay:0.25s;}
.moon_02 .circle_01 {position:absolute;width:3.3%;left: 23.6%;top: 45%; animation-duration: 2.8s;}
.moon_02 .circle_02 {position:absolute;width:3.3%;right: 13%;top: 16%; animation-duration: 2.6s;}
.moon_02 .crescent_moon {position:absolute;width: 24%;right: 41%;bottom: 5%;}

.subVisual_01 .wave { position:absolute; width:175%; left:-50%; bottom:0; animation:20s wave linear infinite; z-index:2;}
@keyframes wave {
  0%,100% {transform: translateX(-8%); }
  50%,55% {transform:translateX(8%);}
}

.boat img {transform-origin: center bottom; animation:1.2s boat_img linear infinite; }
@keyframes boat_img {
  0%,100% {transform: translate(0, 0) rotate(-0.8deg); }
  50% {transform:translate(-2%,-5%) rotate(1deg);}
}
.boat {transform-origin: center bottom; animation:20s boat linear infinite; }
@keyframes boat {
  0%,100% {transform: translate(-80%, 0); }
  50%,55% {transform:translate(50%);}
}

@media  (max-width: 1024px){.subVisual_01 .wave { width:240%; left:-50%;}}


/* 02 */

.swing_01 {position:absolute;width: 18.4%;height: 72%;left: 15.9%;top: 18%;/*background:rgba(0,0,0,0.1);*/z-index:3;}
.vaseWrap {position:absolute; width:27%; left:0; bottom:0;}
.vase { position:relative; width:100%; z-index:5;}
.reed { position:absolute; width:38%; left:17%; bottom:5%; z-index:1;}
.frame { position:absolute; width:67%; right:0; bottom:2%; z-index:1;}
.swing_02 {position:absolute;width: 16.2%;height: 79%;right: 21%;top: 11%;/*background:rgba(0,0,0,0.1);*/z-index:3;}
.candel { position:absolute; width:41%; left:0; bottom:0;}
.candelabrum { position:absolute; width:52%; right:2%; bottom:5%;}

.subArt_02 .chair {position:absolute;width: 11.5%;right: 10.6%;bottom: 30%; z-index:1;}
.subVisual_02 .table {position:absolute; width:111%; left:50%; bottom:0; -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); transform:translateX(-50%); z-index:2;}

.candel .light {width:20%;height:26%; bottom:92%; left:30%; }
.candelabrum .light {width:13%; height:11%; bottom:99%; }
.candelabrum .light_01 { left:-4% !important;}
.candelabrum .light_03 { left:78% !important;}

.reed {animation:2s reed ease infinite; transform: rotate(-1.8deg); transform-origin: left bottom; }
@keyframes reed {
  0%,100% {transform: rotate(-1.8deg); }
  55%,60% {transform: rotate(1.5deg)}
}

.light {position:absolute; left:37%;transform: scale(0.3); transform-origin: right bottom; opacity:0; z-index: 10;}
.active .light { animation:0.5s light ease 1.4s; animation-fill-mode: forwards;}
.active .light.light_01 {animation-delay:5s;}
.active .light.light_02 {animation-delay:5.3s;}
.active .light.light_03 {animation-delay:5.5s;}
@keyframes light {
 0% {transform: scale(0); opacity:0;}
 100% {transform:  scale(1); opacity:1;}
}
.light span {position: absolute; width: 100%;height: 100%; left: 50%; 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;
}
.candel .light span {background-color: #f8d68b;}
.candelabrum .light span {background-color: #fff;}
.light span:first-child {
	box-shadow: 0 0 7px 3px rgba(248,241,139,0.3);
}
.light span:nth-of-type(2) { width: 50%; height: 50%; left:75%; background-color:rgba(255,255,255,0.5); background-image: linear-gradient(to bottom left, rgba(255,255,255,0), rgba(255,255,255,0.5)); 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;}

/* 03 */
.subArt_03 > div { position:absolute; bottom:0; /*background:rgba(0,0,0,0.1);*/}
.memory_01 {width:28.5%; height:64.9%; left:3%;}
.sofa { position:relative; width:100%; z-index:1;}
.cushion { position:absolute; width:22%; left:19%; top:15%; z-index:2;}
.memory_02 {width:14%; height:30%; left:33.4%;}
.player {position:relative; width:100%; z-index:1;}
.memory_03 {width:8.5%; height:95%; right:13%;}
.pot { position:absolute; width:65%; left:15%; bottom:0; z-index:5;}
.bough01 { position:absolute; width:47%; top:0; left:0; transform-origin:right bottom; z-index:3;}
.bough02 { position:absolute; width:59%; top:23%; right:0; transform-origin:left bottom; z-index:3;}
.memory_04 {width:9.3%; height:64%; right:3%;}
.stool { position:absolute;width:100%;left:0; bottom:0;}
.memory_radio {position:absolute;width:79%; left:11.7%; bottom:29%;}

.bough01 {animation:2.2s bough01 ease infinite; transform: rotate(-1.4deg); }
@keyframes bough01 {
  0%,100% {transform: rotate(-1.4deg);}
  55%,60% {transform: rotate(2.5deg)}
}
.bough02 {animation:2.2s bough02 ease infinite; transform: rotate(-1.0deg); }
@keyframes bough02 {
  0%,100% {transform: rotate(-1.0deg);}
  50%,55% {transform: rotate(2.5deg)}
}
@media  (max-width: 1024px){
.subArt_03 .typo { left:52%;}
.memory_01 {left:10%;}
.memory_02 {left:39.4%;}
.memory_03 {right:25%;}
.memory_04 {right:15%;}
}

/* 04 */
.subArt_04 .table { position:absolute; width:90%; left:50%; bottom:0; -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); transform:translateX(-50%); z-index:1;}
.hot_coffee { position:absolute; width:12%; left:24.5%; bottom:5%; z-index:3;}
.steam {position:absolute; animation:3.5s steam ease infinite; transform:translateY(5%); opacity:0;}
@keyframes steam {
  0%,70%,100 {transform:translateY(5%); opacity:0;}
  30%,45% {transform:translateY(0); opacity:1;}
}
.steam_01 { width:9%; left:30%; bottom:97%; animation-delay:0.3s;}
.steam_02 { width:13.5%; left:50%; bottom:92%;}
.steam_03 { width:8%; left:70%; bottom:99%; animation-delay:0.5s;}
.cake { position:absolute; width:12.6%; left:43.7%; bottom:9%; z-index:3;}
.ice_coffee { position:absolute; width:9.3%; left:62.8%; bottom:4.5%; z-index:3;}
.ice_coffee_cup { position:relative; width:100%; z-index:5;}
.cup_back {position:absolute; width:100%; left:0%; bottom:0%; z-index:1;}
.stic {position:absolute; width:35%; right:15%; top:0%; transform-origin:left bottom; z-index:2;}
.stic {animation:1.6s stic ease infinite; transform: rotate(-1.4deg); }
@keyframes stic {
  0%,100% {transform: rotate(-1.4deg);}
  55%,60% {transform: rotate(1.5deg)}
}

/* 05 */
.cloud01 {position:absolute; width:24%; left:-2%; top:33%; animation-delay:0.3s; animation-duration: 8s;z-index:1}
.cloud02 {position:absolute; width:25%; right:-2%; bottom:-1px;z-index:5;}
.rainbow {position:absolute; width:34%; right:6%; bottom:-131%; z-index:4;}

.bird { position:absolute; width:13.3%; left:23.8%; top:20.8%; }
.bird_body {position:absolute; width:80%; left:0; bottom:0; z-index:3;}
.wing_01 {position:absolute; width:40%; left:19%; bottom:24.5%; z-index:2;}
.wing_02 {position:absolute; width:18%; left:38%; bottom:28.8%; z-index:1;}
.twig {position:absolute; width:32%; right:0; top:6%; z-index:1;}

.rainbow {transform: translate(10%,50%); animation:1.5s rainbow ease 2s; animation-fill-mode: forwards;opacity:0;}
@keyframes rainbow {
  0% {transform: translate(10%,50%); opacity:0;}
  100% {transform: translate(0,0); opacity:1;}
}
[class^="cloud"] {animation:7.5s cloud ease infinite; transform:translate(-10%,0);}
@keyframes cloud {
  0%,95% {transform:translate(-10%,0);}
  45%,50% {transform:translate(10%,0);}
}
.bird {animation:1.5s bird ease infinite; transform:translate(-1%,5%);}
@keyframes bird {
  0%,100 {transform:translate(-1%,5%);}
  45%,50% {transform:translate(1%,0);}
}

.wing_01 { animation:1.5s wing_01 ease-in-out infinite; transform:skew(-16deg) ; transform-origin:right bottom; }
@keyframes wing_01 {
  0%,95% {transform:skew(-16deg);}
  45%,50% {transform:skew(3deg);}
}
.wing_02 { animation:1.5s wing_02 ease-in-out infinite; transform:skew(4deg) ; transform-origin:left bottom; }
@keyframes wing_02 {
  0%,90% {transform:skew(4deg);}
  40%,60% {transform:skew(-14deg);}
}
.twig {animation:2.2s twig ease infinite; transform: rotate(-1.0deg);transform-origin:left bottom; }
@keyframes twig {
  0%,100% {transform: rotate(-1.0deg);}
  50%,55% {transform: rotate(2.5deg)}
}

#contents {position:relative;  opacity:0; filter: alpha(opacity=0;); z-index:5;}	
#contents:after, #contents_layer:after {content: "";display:block; clear:both;}
.subCon { position:relative;}
.subCon:after {content:"";display:block;clear:both;}


/* moon */
.chan_wrap { position:relative; margin-top:5%;}
.chan_wrap::after {content:"";display:block;clear:both;}
.chan_00 {display:none;}
.chan_01 {position:absolute; width:32%; left:0; top:0;}
.chan_01 .swiper-container { max-width:380px;}
.swiper-container { padding-bottom:30px !important;}
.swiper-slide img { width:100%; vertical-align:top;}
.swiper-pagination { position:relative !important; bottom:0 !important; top:10px;}
.chan_02 {position:relative; width:63%; left:37%;}
.profile_dl:first-child {margin-bottom:8%}
.profile_dl dt { position:relative; border-bottom:1px solid #efefef;}
.profile_dl dt span { position:relative; display:inline-block; font-family: 'Ubuntu', sans-serif; font-size:1.45em; line-height:1em; letter-spacing:0.01em; font-weight:700; text-transform:uppercase; padding:0 0.3em 0.5em;}
.profile_dl dt a {position:absolute; display:inline-block; right:0; top:0;}
.profile_dl dt span::after {content:""; position:absolute; width:100%; height:3px; background:#459f78; left:0; bottom:-2px; z-index:3;}
.profile_list {}
.profile_list li { font-size:1.1em; line-height:1.6em; color:#404040; padding:0.8em 0.1em; border-bottom:1px solid #ddd;}
.profile_list li::after {content:"";display:block;clear:both;}
.profile_list li i { float:left; display:inline-block; font-style:normal; font-family:'Ubuntu', "Apple SD Gothic Neo",'Noto Sans KR', sans-serif; color:#198b59; letter-spacing:0em; margin-right:1em;}
.profile_list li > div { float:left; display:inline-block; max-width:82%;}
.profile_span {font-family:'Ubuntu', "Apple SD Gothic Neo",'Noto Sans KR', sans-serif; color:#198b59; margin-right:0.3em;}
.profile_list li div .profile_span::before {content:"|"; margin:0 0.5em; color:#ccc;}
.profile_span:first-child::before {display:none;}

@media  (max-width: 768px){
.chan_00 { position:relative; display:block; margin-bottom:5%;}
.chan_01 { width:0; overflow:hidden; }
.chan_02 { width:100%; left:0;}
.profile_dl:first-child { padding-bottom:10%;}
}
@media  (max-width: 500px){ 
.profile_list li { font-size:1.2em; letter-spacing:-0.05em;}
.profile_list li i { float:none; display:block; margin:0 0 0.3em; font-size:1.1em; font-weight:700; letter-spacing:0;}
.profile_list li > div { float:none; display:block; max-width:100%;}
}