@charset "utf-8";
.wrap{max-width:1400px}
#visual{position:relative; left:0px; top:0px; width:100%; min-height:500px}
#visual>ul.visual_img{width:100%; height:100%; overflow:hidden}
/* 비주일이 이미지 시작 */
#visual>ul.visual_img>li:first-child{display:block}
#visual>ul.visual_img>li{display:none; position:absolute; left:0px; top:0px; width:100%; height:100%; overflow:hidden}
#visual>ul.visual_img>li p.img{position:absolute; width:100%; height:100%; animation:visual 20s ease}
#visual>ul.visual_img>li p.img span{display:block; position:absolute;  width:100%; height:100%; }
#visual>ul.visual_img>li p.img span.blur{opacity:0; animation:blur 20s ease; z-index:1}
#visual>ul.visual_img>li p.img img{width:100%; height:100%}
@keyframes blur{
 0% {opacity:1}
 15%{opacity:0}
 100%{opacity:0}
}
@keyframes visual{
 0% {left:0%; top:0%}
 15%{left:-2%; top:0%} 
 55%{left:10%; top:-15%; transform:scale(1.4)} 
 62%{left:2%; top:2%} 
 75%{left:0px; top:0px; transform:scale(1)}
}
/* 비주일이 이미지 끝 */
/* 비주얼이 백그라운드 시작
#visual>ul.visual_img>li{display:none; position:absolute; left:0px; top:0px; width:100%; height:100%; background-repeat:no-repeat; background-position:right top; background-size:100% 100%; background-attachment:fixed; animation-duration:30s; animation-timing-funciton:ease; animation-iteration-count:infinite}
#visual>ul.visual_img>li.visual01{background-image:url(/soraefestival/img/main/visual01.jpg); animation:visual01 30s ease infinite}
#visual>ul.visual_img>li.visual02{background-image:url(/soraefestival/img/main/visual02.jpg); animation:visual02 30s ease infinite}
#visual>ul.visual_img>li.visual03{background-image:url(/soraefestival/img/main/visual03.jpg); animation:visual03 30s ease infinite}
#visual>ul.visual_img>li.visual04{background-image:url(/soraefestival/img/main/visual04.jpg); animation:visual04 30s ease infinite}

@keyframes visual01{
	 0%{background-image:url(/soraefestival/img/main/visual01_blur.jpg)}
	 15%{background-position:left bottom} 
	 55%{background-position:left top; background-size:140% 140%; background-image:url(/soraefestival/img/main/visual01.jpg)} 
	 75%{background-position:right center; background-size:100% 100%}
	}
	@keyframes visual02{
	 0%{background-image:url(/soraefestival/img/main/visual02_blur.jpg)}
	 15%{background-position:left bottom} 
	 55%{background-position:left top; background-size:140% 140%; background-image:url(/soraefestival/img/main/visual02.jpg)} 
	 75%{background-position:right center; background-size:100% 100%}
	}
	@keyframes visual03{
	 0%{background-image:url(/soraefestival/img/main/visual03_blur.jpg)}
	 15%{background-position:left bottom} 
	 55%{background-position:left top; background-size:140% 140%; background-image:url(/soraefestival/img/main/visual03.jpg)} 
	 75%{background-position:right center; background-size:100% 100%}
	}
	@keyframes visual04{
	 0%{background-image:url(/soraefestival/img/main/visual04_blur.jpg)}
	 15%{background-position:left bottom} 
	 55%{background-position:left top; background-size:140% 140%; background-image:url(/soraefestival/img/main/visual04.jpg)} 
	 75%{background-position:right center; background-size:100% 100%}
	}
비주얼이 백그라운드 끝 */

#visual>ul.visual_img .con{position:absolute; top:50%; transform:translateY(-80%); -webkit-transform:translateY(-80%); text-align:center; width:100%}
#visual>ul.visual_img .con p.tit{display:inline-block; padding-top:45px; padding-right:50px; background:url(/soraefestival/img/main/visual_txtbg.png) no-repeat right top}
#visual>ul.visual_img .con p.tit span{padding:0px 10px}
#visual>ul.visual_img .con p.txt{margin-top:2.5%; font-size:1.5em; color:#fff; word-break:keep-all}

#visual>ul.visual_img p.name{position:absolute; bottom:80px; padding:0px 25px; width:250px; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); background:rgba(0,0,0,.7); border-radius:100px;  }
#visual>ul.visual_img p.name a{display:block; position:relative; padding:8px 0px 13px; color:#fff; font-size:1.2em; overflow:hidden}
#visual>ul.visual_img p.name a:after{display:block; content:''; position:absolute; right:0px; bottom:13px; width:20px; height:20px; background:url(/soraefestival/img/main/visual_namebg.png) no-repeat right bottom}
#visual>ul.visual_img p.name a span{display:inline-block; position:relative; }
#visual>ul.visual_img p.name a span:before{display:block; content:''; position:absolute; right:-210%; bottom:0px; width:200%; height:1px; background:#fff}

#visual>ul.visual_btn{position:absolute; bottom:80px; text-align:center; width:330px; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%)}
#visual>ul.visual_btn li{position:absolute; top:-43px}
#visual>ul.visual_btn li.btn_prev{left:0px}
#visual>ul.visual_btn li.btn_next{right:0px}
#visual>ul.visual_btn li a{display:block; position:relative; width:40px; height:40px; text-indent:-5000px}
#visual>ul.visual_btn li a:after, 
#visual>ul.visual_btn li a:before{display:block; content:''; position:absolute; left:12px; top:14px; width:18px; height:3px; border-radius:1px; background:#000; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); box-shadow:0px 0px 10px rgba(255,255,255,.1)}
#visual>ul.visual_btn li a:after{margin-top:11px; transform:rotate(45deg); -webkit-transform:rotate(45deg)}
#visual>ul.visual_btn li.btn_next a:before{transform:rotate(45deg); -webkit-transform:rotate(45deg)}
#visual>ul.visual_btn li.btn_next a:after{transform:rotate(-45deg); -webkit-transform:rotate(-45deg)}
#visual>ul.visual_btn li a:hover:before,
#visual>ul.visual_btn li a:hover:after{background:#fff}

/* 비주얼이 영상 */
.visualVideo{position:absolute; background:#fff; width:800px; max-width:80%; z-index:990; font-size:0px}
.visualVideo.big{bottom:30%; right:50%; transform:translateX(50%); -webkit-transform:translateX(50%); padding:10px}
.visualVideo.small{right:3%; bottom:160px; padding:5px; width:150px; transition:all ease .2s}
.visualVideo .video video{width:100%}
.visualVideo.big .video_close{position:absolute; right:-80px; top:0px; background:rgba(0,0,0,.7); width:80px; height:80px; z-index:991}
.visualVideo.big .video_close a{display:block; width:100%; height:80px} 
.visualVideo.big .video_close a:after,
.visualVideo.big .video_close a:before{display:block; position:absolute; top:50%; left:20%; content:''; width:60%; height:1px; background:#fff}
.visualVideo.big .video_close a:after{transform:rotate(-45deg); -webkit-transform:rotate(-45deg)}
.visualVideo.big .video_close a:before{transform:rotate(45deg); -webkit-transform:rotate(45deg)}
.visualVideo.small .video_close{position:absolute; right:0px; top:0px; width:100%; height:100%}
.visualVideo.small .video_close a{display:block; width:100%; height:100%}

/* .visualVideo .video_open{position:absolute; right:5%; bottom:140px; z-index:990; -webkit-transform:all ease 5s}
.visualVideo .video_open a{display:block; width:75px; height:75px; border-radius:80px; border:5px solid #fff; box-shadow:0px 1px 2px rgba(0,0,0,.5), inset 0px 1px 2px rgba(0,0,0,.5); text-indent:-5000px}
.visualVideo .video_open a:before,
.visualVideo .video_open a:after{display:block; content:''; position:absolute; left:16px; top:38px; width:28px; height:5px; background:#fff; transform:rotate(45deg); border-radius:2px; box-shadow:0px 1px 2px rgba(0,0,0,.5)}
.visualVideo .video_open a:after{margin-left:17px; transform:rotate(-45deg)} */


#contents{padding:100px 0px; background:url(/soraefestival/img/main/main_bg.jpg) no-repeat center top}
#contents .wrap:after{display:block; content:''; clear:both}
#contents .con{float:right; width:51.5%}
#contents ul.banr_festival{height:230px}
#contents ul.banr_festival:after{display:block; content:''; clear:both}
#contents ul.banr_festival>li{float:left; width:32%; margin-left:2%; border-radius:7px; box-shadow:0px 1px 3px rgba(0,0,0,.5); transition:all ease .2s}
#contents ul.banr_festival>li:first-child{margin-left:0%;}
#contents ul.banr_festival>li.banr01{background:#7ace4c; background:-webkit-radial-gradient(center, ellipse cover, #91d75a 30%, #59c138 100%); background:radial-gradient(ellipse at center, #91d75a 30%, #59c138 100%)}
#contents ul.banr_festival>li.banr02{background:#ffa264; background:-webkit-radial-gradient(center, ellipse cover, #ffb478 30%, #ff8848 100%); background: radial-gradient(ellipse at center, #ffb478 30%, #ff8848 100%)}
#contents ul.banr_festival>li.banr03{background:#f37a80; background:-webkit-radial-gradient(center, ellipse cover, #f59198 30%,#ef565b 100%); background: radial-gradient(ellipse at center, #f59198 30%,#ef565b 100%)}
#contents ul.banr_festival>li a{display:block; text-align:center; padding:15% 0%; padding-bottom:110px; text-decoration:none; word-break:keep-all; color:rgba(0,0,0,.9)}
#contents ul.banr_festival>li a p.tit{padding:0px 10px; font-size:1.4em; font-weight:bold; }
#contents ul.banr_festival>li a p.txt{padding:0px 15%; margin-top:15px; text-align:left; font-size:0.93em; font-weight:bold; color:#fff; text-shadow:0px 0px 2px rgba(0,0,0,.2)}
#contents ul.banr_festival>li.banr01 a{background:url(/soraefestival/img/main/banr01_img01_new.png) no-repeat 45% bottom; background:url(/soraefestival/img/main/banr01_img01_new.png) no-repeat 30% bottom, url(/soraefestival/img/main/banr01_img02.png) no-repeat right 27% bottom 20%}
#contents ul.banr_festival>li.banr02 a{background:url(/soraefestival/img/main/banr02_img01_new.png) no-repeat 45% bottom; background:url(/soraefestival/img/main/banr02_img01_new.png) no-repeat right 8% bottom, url(/soraefestival/img/main/banr02_img02.png) no-repeat 41% bottom}
#contents ul.banr_festival>li.banr03 a{background:url(/soraefestival/img/main/banr03_img01.png) no-repeat 45% bottom; background:url(/soraefestival/img/main/banr03_img01.png) no-repeat 45% bottom, url(/soraefestival/img/main/banr03_img02.png) no-repeat center bottom 30%}
#contents div.notice{position:relative; margin-top:10%; padding-left:175px}
#contents div.notice p.tit{position:absolute; left:0px; text-align:center; width:140px; padding-top:85px; background:url(/soraefestival/img/main/notice_ic.png) no-repeat center top; font-size:1.86em}
#contents div.notice ul{position:absolute; left:25px; top:140px; text-align:center}
#contents div.notice ul>li{display:inline-block; color:#1d528f; }
#contents div.notice ul>li a{display:block; position:relative; width:22px; height:22px; text-indent:-5000px}
#contents div.notice ul>li a:before{display:block; content:''; position:absolute; top:5px; width:10px; height:10px; border:0px solid #1d528f; transform:rotate(45deg); -webkit-transform:rotate(45deg)}
#contents div.notice ul>li.btn_prev a:before{border-width:0px 0px 1px 1px; right:2px}
#contents div.notice ul>li.btn_next a:before{border-width:1px 1px 0px 0px; left:2px}
#contents div.notice ul>li span.now{display:inline-block; width:20px; height:20px; background:#1d528f; border-radius:30px; color:#fff}
#contents div.notice dl{display:none}
#contents div.notice p+dl{display:block; min-height:150px}
#contents div.notice dl dt{display:flex; align-items:center; min-height:74px; font-size:1.86em; word-break:keep-all;  overflow:hidden}
#contents div.notice dl dd.txt{margin-top:15px; font-size:1.06em; word-break:keep-all; line-height:150%; overflow:hidden}
#contents div.notice dl dd.date{margin-top:7px; font-size:1.06em;}
#contents ul.banr{margin-top:22%; overflow:hidden}
#contents ul.banr:after{display:block; content:''; clear:both}
#contents ul.banr li{position:relative; float:left; text-align:center; width:25%}
#contents ul.banr li span{display:block; position:absolute; left:0px; top:0px; width:100%; height:147px; background:url(/soraefestival/img/main/banr_bg.png) no-repeat center top; background-size:contain; animation:banr 3s linear infinite}
@keyframes banr{
	0%{transform:rotate(0deg)} 
	100%{transform:rotate(360deg)}
}
#contents ul.banr li:hover span{animation-play-state:paused}
#contents ul.banr li a{display:block; position:relative; padding-top:160px; background-repeat:no-repeat; background-position:center 35%; font-size:1.2em; z-index:1}
#contents ul.banr li.ic01 a{background-image:url(/soraefestival/img/main/banr_ic01.png)}
#contents ul.banr li.ic02 a{background-image:url(/soraefestival/img/main/banr_ic02.png)}
#contents ul.banr li.ic03 a{background-image:url(/soraefestival/img/main/banr_ic03.png)}
#contents ul.banr li.ic04 a{background-image:url(/soraefestival/img/main/banr_ic04.png)}
#contents .poster{float:left; width:42.15%; font-size:0px; border-radius:7px; box-shadow:0px 1px 3px rgba(0,0,0,.3); overflow:hidden}
#contents .poster img{width:100%}

p.btn_goCon{position:absolute; right:5%; bottom:60px;}
p.btn_goCon a{display:block; width:75px; height:75px; border-radius:80px; border:5px solid #fff; box-shadow:0px 1px 2px rgba(0,0,0,.5), inset 0px 1px 2px rgba(0,0,0,.5); text-indent:-5000px}
p.btn_goCon a:before,
p.btn_goCon a:after{display:block; content:''; position:absolute; left:16px; top:38px; width:28px; height:5px; background:#fff; transform:rotate(45deg); -webkit-transform:rotate(45deg); border-radius:2px; box-shadow:0px 1px 2px rgba(0,0,0,.5)}
p.btn_goCon a:after{margin-left:17px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg)}


@keyframes banr_festival{
	0%{top:0px}
	50%{top:-10px}
	100%{top:0px}
	}

/*******************************************************************************************************************/


@media screen and (min-width:1000px){	
#contents ul.banr_festival>li:hover{position:relative; border-radius:500px; background:transparent; animation:banr_festival 1s ease infinite; box-shadow:inset 2px 1px 6px rgba(255,255,255,.5); border:1px solid #fff}		
}

@media screen and (max-width:1000px){
	#visual{min-height:500px}
	#visual>ul.visual_img>li{background-size:300% 100%; background-repeat:no-repeat; background-position:right top; background-attachment:fixed; animation-duration:20s; animation-timing-function:ease; animation-iteration-count:infinite}
	#visual>ul.visual_img>li.visual01{background-image:url(/soraefestival/img/main/visual01.jpg); animation-name:visual01}
	#visual>ul.visual_img>li.visual02{background-image:url(/soraefestival/img/main/visual02.jpg); animation-name:visual02}
	#visual>ul.visual_img>li.visual03{background-image:url(/soraefestival/img/main/visual03.jpg); animation-name:visual03}
	#visual>ul.visual_img>li.visual04{background-image:url(/soraefestival/img/main/visual04.jpg); animation-name:visual04}
	#visual>ul.visual_img>li p.img{display:none}
	#visual>ul.visual_img>li .con p.tit{max-width:60%; padding-top:5px; padding-right:7%; background-size:10%}
	#visual>ul.visual_img>li .con p.tit span img{margin:10px 0px; width:100%; max-width:350px}
	#visual>ul.visual_img>li .con p.txt{padding:0px 15%; font-size:1.2em}	
	#visual>ul.visual_img p.name{bottom:118px; text-align:center}
	#visual>ul.visual_img p.name a{}
	#visual>ul.visual_img p.name a:after, 
	#visual>ul.visual_img p.name a span:before{display:none}
	#visual>ul.visual_btn{bottom:120px}	
	

	@keyframes visual01{
	 0%{background-image:url(/soraefestival/img/main/visual01_blur.jpg)}
	 15%{background-position:left bottom} 
	 55%{background-position:left top; background-size:420% 140%; background-image:url(/soraefestival/img/main/visual01.jpg)} 
	 75%{background-position:left 30% center; background-size:300% 100%}
	}
	@keyframes visual02{
	 0%{background-image:url(/soraefestival/img/main/visual02_blur.jpg)}
	 15%{background-position:left bottom} 
	 55%{background-position:left top; background-size:420% 140%; background-image:url(/soraefestival/img/main/visual02.jpg)} 
	 75%{background-position:center center; background-size:300% 100%}
	}
	@keyframes visual03{
	 0%{background-image:url(/soraefestival/img/main/visual03_blur.jpg)}
	 15%{background-position:left bottom} 
	 55%{background-position:left top; background-size:420% 140%; background-image:url(/soraefestival/img/main/visual03.jpg)} 
	 75%{background-position:center center; background-size:300% 100%}
	}
	@keyframes visual04{
	 0%{background-image:url(/soraefestival/img/main/visual04_blur.jpg)}
	 15%{background-position:left bottom} 
	 55%{background-position:left top; background-size:420% 140%; background-image:url(/soraefestival/img/main/visual04.jpg)} 
	 75%{background-position:center center; background-size:300% 100%}
	}

	#contents{background-position:center -10%}
	#contents .poster{float:none; margin:0px auto 50px; width:90%; max-width:450px}
	#contents .con{float:none; margin:auto; width:100%}
}

@media screen and (max-width:620px){
	#contents{padding-bottom:0px}	
	.visualVideo.big{bottom:40%; padding:6px}
	.visualVideo.small{right:3%; bottom:10px; padding:5px; width:150px; transition:all ease .2s}
	.visualVideo.big .video_close{right:0px; top:-50px; width:50px; height:50px}
	p.btn_goCon{right:auto; left:50%; transform:translatex(-50%); -webkit-transform:translatex(-50%); bottom:30px}
	p.btn_goCon a{width:60px; height:60px; border-width:4px}
	p.btn_goCon a:before,
	p.btn_goCon a:after{left:12px; top:30px; width:23px; height:4px}
	p.btn_goCon a:after{margin-left:14px}
	#contents ul.banr_festival{height:auto}
	#contents ul.banr_festival>li{margin-top:10px; margin-left:0px; width:49%}
	#contents ul.banr_festival>li:first-child{width:100%}
	#contents ul.banr_festival>li:last-child{margin-left:2%}
	#contents ul.banr_festival>li.banr01 a{display:block; text-align:left; padding:20px 30px; padding-right:110px; background-position:right 10px bottom, right 80px bottom 0px}
	#contents ul.banr_festival>li.banr01 a p.tit,
	#contents ul.banr_festival>li.banr01 a p.txt{padding:0px}
	/*#contents ul.banr_festival>li.banr01 a{background-position:right 10px bottom, right 80px bottom 0px}
 	#contents ul.banr_festival>li.banr02 a{background-position:right 10px bottom, right 80px bottom 0px}
	#contents ul.banr_festival>li.banr03 a{background-position:right 10px top 50px, right 20px top 25px} */
	#contents div.notice dl dt{font-size:1.6em; line-height:1.5em}
	#contents ul.banr{margin-top:50px; padding:50px 0px;  border-top:1px solid #1d528f}
	#contents ul.banr li{margin-bottom:10px}
	#contents ul.banr li span{height:90px; background-size:100% 90%}
	#contents ul.banr li a{padding-top:80px; background-position:center 30px; background-size:50px; font-size:.9em; word-break:keep-all}
	/* @keyframes banr{0%{transform:rotate(0deg)} 100%{transform:rotate(0deg)}} */
}