#container {/* background:url(../images/bg/bg-main-visual.jpg) center top no-repeat; */}
#container section {/*position:relative; margin:10px auto 0 auto;  width:998px; */}

#main-visual {position: relative;height: 666px;overflow: hidden}
#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;padding-top: 95px;}
#main-visual .main-slogan img#mSlogan02 {margin-left: 10px;}
#main-visual .main-title {position: relative;padding-top: 20px;text-align: left}
#main-visual .main-title img {margin-left: 8px}
#main-visual .main-title img#mTitle01 {margin-left: 170px}
#main-visual .main-title img#mDrop01 {position: absolute;top: 25px;right: 176px}
#main-visual .main-title img#mDrop02 {position: absolute;top: 105px;right: 250px}
#main-visual .main-title img#mDrop03 {position: absolute;top: 140px;right: 280px}
#main-visual .main-info {position: relative;padding-top: 55px;text-align:center;}
#main-visual .main-info img {margin-bottom: 10px;}



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

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

.visual-over {position: absolute;left: 0;bottom: 0;width: 100%;height: 50px;background: url(/festa/wp-content/themes/seoul_festa/page-templates/water/2018/assets/images/bg/bg_visual_over.png) no-repeat 50% 100%;z-index: 10}



.main-content {overflow: hidden;padding-top: 20px;}
.main-content .holder {width: 1000px;margin: 0 auto;overflow: hidden}

.main-content .sec-main-left {float: left;width: 620px}
.main-content .sec-main-right {float: right;width: 365px;}

.main-content .main-links {display: table;width: 100%;height: 170px;overflow: hidden}
.main-content .main-links li {display: table-cell;width: 33.3333%;height: 170px;vertical-align: middle;text-align: center;}
.main-content .main-links li a {display: block;width: 100%;height: 100%;}

.main-content .main-links1 {margin-bottom: 10px;border: 1px solid #c3c3c6}
.main-content .main-links1 li.links2,
.main-content .main-links1 li.links3 {border-left: 1px solid #c3c3c6}

.main-content .main-links li a span {display: inline-block;width: 110px;height: 130px;margin-top: 20px;background: url(/festa/wp-content/themes/seoul_festa/page-templates/water/2018/assets/images/img/txt_menu.png) no-repeat 0 0;text-indent: -9999em;}
.main-content .main-links li.links1 a span {background-position: 0 0}
.main-content .main-links li.links2 a span {background-position: -110px 0}
.main-content .main-links li.links3 a span {background-position: -220px 0}

.main-content .main-links li.links1 a:hover span {background-position: 0 -130px}
.main-content .main-links li.links2 a:hover span {background-position: -110px -130px}
.main-content .main-links li.links3 a:hover span {background-position: -220px -130px}

.main-content .main-links li.links4 a {background-color: #0094f2;}
.main-content .main-links li.links5 a {background-color: #18c996;}
.main-content .main-links li.links6 a {background-color: #1f4bb4;}
.main-content .main-links li.links4 a:hover {background-color: #1da7fe;}
.main-content .main-links li.links5 a:hover {background-color: #18c9b2;}
.main-content .main-links li.links6 a:hover {background-color: #2661ee;}


.main-content .main-links li.links4 a span {background-position: 0 -260px}
.main-content .main-links li.links5 a span {background-position: -110px -260px}
.main-content .main-links li.links6 a span {background-position: -220px -260px}

.main-content .main-links li.links4 a:hover span {background-position: 0 -390px}
.main-content .main-links li.links5 a:hover span {background-position: -110px -390px}
.main-content .main-links li.links6 a:hover span {background-position: -220px -390px}

/* 티저 */
.teaser-area {width: 100%;margin-bottom: 10px;}
/* 공지사항 */
#sec-main-notice {position: relative;}
#sec-main-notice h3 {width: 87px;height: 22px;margin: 45px 0 15px;background: url(/festa/wp-content/themes/seoul_festa/page-templates/water/2018/assets/images/txt/txt_notice.png) no-repeat 0 0;text-indent: -9999em}
#sec-main-notice li {position: relative;height: 50px;line-height: 50px;padding: 0px 0 0px 16px;border-bottom: 1px solid #dddddd}
#sec-main-notice li:before{
content: '';
position: absolute;
top: 22px;
left: 5px;
width: 3px;
height: 3px;
background: #444444
}
#sec-main-notice li:first-child {border-top: 1px solid #dddddd}
#sec-main-notice li a {display: inline-block;width: 100%;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;font-size: 13px;}
#sec-main-notice li.new a {width: 80%;}
#sec-main-notice li.new .new {display: block;position: absolute;top: 50%;right: 0;padding: 3px 2px 2px 3px;background: #35a8d8;margin-top: -8px;color: #fff;font-size: 11px;font-weight: bold;line-height: 11px;}
#sec-main-notice .more {position: absolute;top: 10px;right: 0px;color: #333;font-size: 12px;}

/* 
.main-content #sec-main-event {float: right;overflow: hidden}
#sec-main-event .event-item {float: left;width: 220px;height: 270px;margin-left: 10px;}
#sec-main-event .event-item a {position: relative;display: block;width: 220px;height: 270px;padding: 30px 20px 0;color: #fff;border-radius: 13px;box-sizing: border-box;
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
transition: all .5s ease-in;
}
#sec-main-event .event-item a:hover {text-decoration: none;}
#sec-main-event .event-item h4 {min-height: 60px;font-size: 24px;line-height: 1.2}
#sec-main-event .event-item .block {display: block}
#sec-main-event .event-item-contest {}

#sec-main-event .event-item a .img {width: 180px;height: 90px;overflow: hidden;}
#sec-main-event .event-item a .txt {margin-top: 15px;line-height: 1.2}

#sec-main-event .event-item a .img img {width: 100%;margin: 0;
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
transition: all .5s ease-in;
}
#sec-main-event .event-item a.on .img img {width: 200px;max-width: 110%;margin: -5px 0 0 -5px;} */

/* 공모전 */
#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;}