#container {position: relative;height: 985px;}
#main-visual {position: relative;width: 100%;height: 985px;overflow: hidden;z-index: 1;}
#main-visual>.holder {position: absolute; top: 0;left: 50%;margin-left: -500px;width: 1000px;height: 600px;}

#main-visual>.holder {text-align: center}
#main-visual>.holder img {opacity: 0}
#main-visual .main-slogan {position: relative;min-height: 490pxpadding-top: 0;}

#main-visual .main-slogan img#mSlogan01 {position: absolute;top: 140px;left: 50%;margin-left: -135px;}
#main-visual .main-slogan img#mSlogan02 {position: absolute;top: 126px;left: 50%;margin-left: -355px;}
#main-visual .main-slogan .main-info {position: relative;padding-top: 320px;}
#main-visual .main-slogan .main-info img {margin-bottom: 5px;}


#main-visual .bxslider li {height: 985px;overflow: hidden}
#main-visual .bx-wrapper {box-shadow: none;border: 0} 
#main-visual .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {bottom: 30px}

@keyframes move_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.85)
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1)
    }
}
@keyframes move_wave_against {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }
    30% {
        transform: translateX(-25%) translateZ(0) scaleY(0.85)
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1)
    }
}

.wave-animation {
	display: none;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    margin: auto;
	width: 160px;
	height: 160px;
	z-index: 10;
}
.wave-animation-inner {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 100%;
}
.bg-wave1 {
    z-index: 10;
}
.bg-wave1 {
    z-index: 15;
	opacity: 0.9;
}
.wave-bg {
    position: absolute;
    left: 0;
    width: 795px;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 100px;
    transform-origin: center bottom;
}

.wave-bg-wave1 {
	background-image: url(/festa/wp-content/themes/seoul_festa/page-templates/water/2019/teaser/images/bg_wave1.png);
}
.wave-bg-wave2 {
	background-image: url(/festa/wp-content/themes/seoul_festa/page-templates/water/2019/teaser/images/bg_wave2_1.png);
}
.wave-animation .wave-bg-wave1 {
    /* animation: move_wave 6s normal linear infinite; */
	animation: move_wave 6s  linear infinite;
	-webkit-animation : move_wave 6s normal linear infinite; 
}

.wave-animation .wave-bg-wave2 {
    /*animation: move_wave 6s reverse linear infinite;*/
	animation: move_wave_against 6s  linear infinite;
	-webkit-animation : move_wave 6s reverse linear infinite; 
}

.main-links-wrap {overflow: hidden;margin: 80px 0 0;opacity: 0;min-height: 180px;}
.main-links-wrap ul {display: table;height: 180px;padding: 0 20px}
.main-links-wrap ul li {display: table-cell;width: 160px;height: 160px;padding: 10px 0;text-align: center;vertical-align: middle}
.main-links-wrap ul>li>a {overflow: hidden;position: relative;display: block;width: 140px;height: 140px;margin: 0 auto;background: rgba(255,255,255,.8);border-radius: 50%;color: #37405e;font-size: 17px;text-decoration: none;font-weight: bold;letter-spacing: -0.075em;
box-shadow: 0 0 6px rgba(0,0,0,.6);
-webkit-box-shadow: 0 0 6px rgba(0,0,0,.6);
transition : all .3s;
-webkit-transition: all .3s;
}
.main-links-wrap ul li a:hover {width: 160px;height: 160px;background-color: #4974ff ;color: #fff;font-size: 19px;}
.main-links-wrap ul li a:hover>.wave-animation {display: block;}
.main-links-wrap ul li a:hover:after {
content: '';
position: absolute;
bottom: 10px;
right: 60px;
width: 24px;
height: 20px;
background: url(../images/ico/ico-dot.png);
z-index: 20;
}

.main-links-wrap a .icon-main {display: block;width: 60px;height: 60px;margin: 20px auto 5px;background: url(../images/ico/ico-main-off.png) no-repeat 50% 50%}
.main-links-wrap a .icon-main1 {background-position: 0 0}
.main-links-wrap a .icon-main2 {background-position: -60px 0}
.main-links-wrap a .icon-main3 {background-position: -120px 0}
.main-links-wrap a .icon-main4 {background-position: -180px 0}
.main-links-wrap a .icon-main5 {background-position: -240px 0}
.main-links-wrap a .icon-main6 {background-position: -300px 0}
.main-links-wrap a:hover .icon-main {width: 70px;height: 70px;background: url(../images/ico/ico-main-on.png) no-repeat 50% 50%}
.main-links-wrap a:hover .icon-main1 {background-position: 0 0}
.main-links-wrap a:hover .icon-main2 {background-position: -70px 0}
.main-links-wrap a:hover .icon-main3 {background-position: -140px 0}
.main-links-wrap a:hover .icon-main4 {background-position: -210px 0}
.main-links-wrap a:hover .icon-main5 {background-position: -280px 0}
.main-links-wrap a:hover .icon-main6 {background-position: -350px 0}

.bg-visual {height: 985px;background-position: 50% 0}

#footer {position: absolute;bottom: 0;left: 0;width: 100%;height: 211px;margin-top: 0;z-index: 3;}


/* 티저 */
.teaser-area {width: 100%;margin-bottom: 10px;}
/* 공지사항 */
#sec-main-notice {position: relative;overflow: hidden;width: 632px;margin: 40px auto 0;padding: 0 20px;line-height: 40px;background: rgba(73,116,255,.8);border-radius: 15px;}
#sec-main-notice h3 {float: left;width: 100px;text-align: left;color: #fff;font-size: 18px;}
#sec-main-notice ul {float: left;width: 490px;}
#sec-main-notice ul li {position: relative;width: 100%;}
#sec-main-notice ul li a {position: relative;display: block;width: 100%;padding-right: 100px;text-decoration: none;}
#sec-main-notice ul li a .text {display: block;width: 100%;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;color: #fff;}
#sec-main-notice ul li a .date {position: absolute;top: 0px;right: 0;color: #fff;}
#sec-main-notice .more {position: absolute;top: 14px;left: 95px;width: 12px;height: 12px;background: url(../images/ico/ico-more.png) no-repeat 0 0;text-indent: -9999em}


/* 공모전 */
#sec-main-event .event-item-contest h4 {position: absolute;left: 0;bottom: -5px;width: 100%;text-align: center}
#sec-main-event .event-item-contest a .txt {text-align: center;}
#sec-main-event .event-item-contest a .img {height: 120px;text-align: center}
#sec-main-event .event-item-contest a .img img {width: 100px}
#sec-main-event .event-item-contest a.on .img img {width: 107px}

#sec-main-event .event-item-expo a {background: #4f90dd url(/festa/wp-content/themes/seoul_festa/page-templates/water/2018/assets/images/ico/ico-plus.png) no-repeat 184px 20px}
#sec-main-event .event-item-symposium a {background: #69cdf0 url(/festa/wp-content/themes/seoul_festa/page-templates/water/2018/assets/images/ico/ico-plus.png) no-repeat 184px 20px}
#sec-main-event .event-item-contest a {background: #4f90dd url(/festa/wp-content/themes/seoul_festa/page-templates/water/2018/assets/images/bg/bg_main_contest.png) no-repeat 0 0}

#sec-main-event .event-item-expo a:hover,
#sec-main-event .event-item-expo a.on {background-color: #376ed3}
#sec-main-event .event-item-symposium a:hover,
#sec-main-event .event-item-symposium a.on {background-color: #33aae5}
#sec-main-event .event-item-contest a:hover,
#sec-main-event .event-item-contest a.on {background-color: #2268e8}


#movie {position: fixed;top: 0;left: 0;width: 100%;height: 100%;display: none;background: rgba(0,0,0,1);z-index: 100000}
#movie .movie-con {display: table;width: 100%;height: 100%}
#movie .movie-content {display: table-cell;vertical-align: middle}
#movie #movepage2 {position: absolute;top:15px;right: 15px;}


/* 
#visual {text-align:center;}
#slogan {height:400px;} */

#masonry {position:relative; z-index:5; margin-top:77px !important; overflow:hidden; font-weight:700;}
#masonry [class*="block"] {position:relative; float:left; margin:0 10px 10px 0; width:242px; background:#59a9dc;}
#masonry [class*="block"] a {position:relative; display:block; min-height:222px; overflow:hidden; color:#fff;}
#masonry [class*="block"] a:before, #masonry [class*="block"] a:after {content:" "; position:absolute; z-index:2; top:0; right:0; left:0; bottom:0; opacity:0; filter:alpha(opacity=0); transition:all .75s ease;}
#masonry [class*="block"] a:before {z-index:3; background:url(../images/bg/bg-main-masonry-block-mask.png);}
#masonry [class*="block"] a:hover:before, #masonry [class*="block"] a:hover:after {opacity:1; filter:alpha(opacity=100);}
#masonry [class*="block"] a span {display:block; position:relative; z-index:4; padding:0 20px;}
#masonry [class*="block"] a span.thum {float:left; z-index:2; padding:0;}
#masonry [class*="block"] a span.info {position:relative; z-index:3; float:left; padding:0; width:242px;}
#masonry [class*="block"] a span.title {padding-top:29px; font-size:24px; font-size:1.714rem; color:#fff;}
#masonry [class*="block"] a span.summary {margin-top:9px; font-size:16px; font-size:1.143rem;}
#masonry [class*="block"] a span.content {margin-top:15px; font-size:12px; font-size:0.857rem;}
#masonry .block1 canvas {z-index:2;}
#masonry .block2 {margin-right:0; width:746px; background:#8ec3e3;}
#masonry .block2 a:after {background:url(../images/bg/bg-main-masonry-block3.jpg) right bottom no-repeat;}
#masonry .block2 a span.thum:before {content:" "; position:absolute; z-index:1; top:50%; margin-top:-20px; right:0; width:0; height:0; border-style:solid; border-width:20px 26px 20px 0; border-color:transparent #8ec3e3 transparent transparent;}
#masonry .block2 a span.info {width:258px;}
#masonry .block3 {background:#59a9dc;}
#masonry .block3 a:after {background:url(../images/bg/bg-main-masonry-block2.jpg) right bottom no-repeat;}
#masonry .block3 a span.summary {color:#e6f4f6;}
#masonry .block4 {margin-right:0; width:494px; background:#98c9ce;}
#masonry .block4 a:after {background:url(../images/bg/bg-main-masonry-block4.jpg) right bottom no-repeat;}
#masonry .block4 a span.info {width:258px;}
#masonry .block4 a span.summary {color:#e6f4f6;}
#masonry .block4 a span.content {margin-top:33px;}

#notice {position: relative;clear: both;margin-top: 30px;border:1px solid #f5f4f2; font-weight:700;}
#notice h3 {position:absolute; top:13px; left:51px; background: url(../images/ico/ico-notice.png) no-repeat 0 0;padding-left: 40px;font-size:24px; font-size:1.714rem; font-weight:400; color:#747474;z-index: 1000}
#notice h3 a {font-size:11px; font-size:0.786rem; color:#a3a3a3;}
#notice ul {padding:19px 0 22px 268px; overflow:hidden;}
#notice li {position:relative; float:left; margin-right:80px; padding:0 0 0 13px; width:600px; color:#aaa;min-height: 66px;line-height: 66px;box-sizing: border-box;}
#notice li:nth-last-child(1) {margin-right:0}
#notice li:before {content:"·"; position:absolute; top:2px; left:0;}
#notice li a {position:relative; display:block; color:#333;max-width:600px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#notice li * {vertical-align:middle;}
#notice li a span.text {display:inline-block; }
#notice li a span.new {display:inline-block; position:relative; padding:0 6px 1px 4px; background:#35a8d8; font-size:10px; font-size:0.714rem; line-height:1; color:#fff;}
/* #notice li a span.new {display:inline-block; position:relative; top:1px; left:2px; padding:0 6px 1px 4px; background:#b0b0b0; font-size:10px; font-size:0.714rem; line-height:1; color:#fff;}
#notice li a span.date {position:absolute; top:5px; right:0; font-size:11px; font-size:0.786rem;} */

#notice .bx-wrapper .bx-controls {bottom: auto;top: 0}
#notice .bx-wrapper .bx-controls-direction a {width: 40px;height: 32px;margin-top: 0;background: url(../images/ico/ico-notice-arrows.png) no-repeat 0 0;}
#notice .bx-wrapper .bx-controls-direction a.bx-prev {left: auto;right: 1px;top:0;}
#notice .bx-wrapper .bx-controls-direction a.bx-next {right: 1px;top:32px;background-position: 0 -32px;}

#event ul {overflow:hidden; font-weight:800;}
#event ul li {float:left; margin-right:10px; width:240px; border:1px solid #f5f4f2; color:#7e8083; transition:all .75s ease;}
#event ul li:nth-last-child(1) {margin-right:0;}
#event ul li a {display:block; position:relative; padding:35px 20px 14px 20px; color:#7e8083; text-decoration:none;}
#event ul li a:before {content:" "; position:absolute; z-index:1; top:0; right:0; left:0; bottom:0; opacity:0; transition:all .5s ease;}
#event ul li:nth-last-child(4) a:before {background:#f5f4f2 url(../images/bg/bg-main-event1.jpg) right top no-repeat;}
#event ul li:nth-last-child(3) a:before {background:#f5f4f2 url(../images/bg/bg-main-event2.jpg) right top no-repeat;}
#event ul li:nth-last-child(2) a:before {background:#f5f4f2 url(../images/bg/bg-main-event3.jpg) right top no-repeat;}
#event ul li:nth-last-child(1) a:before {background:#f5f4f2 url(../images/bg/bg-main-event4.jpg) right top no-repeat;}
#event ul li a:hover:before {opacity:1; filter:alpha(opacity=100);}
#event ul li a span {display:block; position:relative; z-index:5; margin-bottom:8px; font-size:12px; font-size:0.857rem;}
#event ul li a span.title {margin-bottom:19px; font-size:24px; font-size:1.714rem; line-height:1.03; font-weight:800; color:#7e8083;}
#event ul li a span.text {color:#b78f9e;}
#event ul li a span.more {margin:25px 0 0 0; padding-top:42px; overflow:hidden; background:url(../images/bg/bg-main-event-liner.gif) left top repeat-x;}
#event ul li a span.more em {display:block; float:right; width:22px; height:22px; overflow:hidden; background:url(../images/btn/btn-main-event.gif); text-indent:-9999px;}