테마 jelly 배너 질문 채택완료

</p>

<p>/*메인배너*/</p>

<p>#main_bn{width:100%;z-index:1;position:relative}</p>

<p>#main_bn ul li {height:600px;-webkit-transition: all 0.30s ease-in-out;</p>

<p>-moz-transition: all 0.30s ease-in-out;</p>

<p>-ms-transition: all 0.30s ease-in-out;</p>

<p>-o-transition: all 0.30s ease-in-out;}</p>

<p>#main_bn .bn-img{display:block;height:100%;width:100%;background-size:100% 100%;background-position:top center;</p>

<p>background-size:cover; </p>

<p>-webkit-background-size: cover;</p>

<p>-moz-background-size: cover;</p>

<p>-o-background-size: cover; }</p>

<p> </p>

<p>#main_bn .active{opacity:1}</p>

<p>#main_bn .bn-txt-wr{display:table;height:100%;width:100%;margin:0 auto;max-width:1200px;position:relative;z-index:20;text-align:left}</p>

<p>#main_bn .bn-txt{display:table-cell;vertical-align:middle;padding:0 50% 0 20px;font-size:4em;font-weight:bold;word-break: keep-all;color:#fff;</p>

<p>-webkit-transition: all 0.30s ease-in-out;</p>

<p>-moz-transition: all 0.30s ease-in-out;</p>

<p>-ms-transition: all 0.30s ease-in-out;</p>

<p>-o-transition: all 0.30s ease-in-out;</p>

<p>-webkit-text-shadow: 0 1px 2px rgba(0,0,0,0.2);</p>

<p>-moz-text-shadow: 0 1px 2px rgba(0,0,0,0.2);</p>

<p>text-shadow: 0 1px 2px rgba(0,0,0,0.2);}</p>

<p>#main_bn .btn_detail{text-indent:-999px;font-size:0;;overflow:hidden;text-align:center;background:url(img/btn_detail.png) 50% 50%  no-repeat;width:118px;height:44px;margin-top:40px;display:block;border-radius:30px; opacity:0.9;</p>

<p>-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);</p>

<p>-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);</p>

<p>box-shadow: 0 1px 2px rgba(0,0,0,0.2); }</p>

<p>#main_bn .btn_detail:hover{ ; opacity:1;</p>

<p>-webkit-box-shadow: 0 6px 10px rgba(0,0,0,0.2);</p>

<p>-moz-box-shadow: 0 6px 10px rgba(0,0,0,0.2);</p>

<p>box-shadow: 0 6px 10px rgba(0,0,0,0.2);}</p>

<p> </p>

<p>#main_bn .bx-controls{position:absolute;bottom:30px;left:50%;width:200px;margin-left:-100px;text-align:center;z-index:99}</p>

<p>#main_bn .bx-pager-item{display:inline-block;padding:0 8px}</p>

<p>#main_bn .bx-pager-link {display:block;background:#fff;opacity:0.5;border-radius:5px;width:6px;height:6px;text-indent:-999px;overflow:hidden}</p>

<p>#main_bn .active {opacity:1;</p>

<p>-webkit-box-shadow: 0 0  8px 5px rgba(255,255,255,0.6);</p>

<p>-moz-box-shadow:  0 0  8px 5px rgba(255,255,255,0.6) ;</p>

<p>box-shadow: 0 0  8px 5px rgba(255,255,255,0.6);}</p>

<p>#main_bn .bx-prev{position:absolute;top:50%;left:0;margin-top:-20px;width:40px;height:40px;text-indent:-999pc;overflow:hidden;background:url('./img/btn_prev.png') no-repeat 50% 50%;opacity:0.7}</p>

<p>#main_bn .bx-next{position:absolute;top:50%;right:0;margin-top:-20px;width:40px;height:40px;text-indent:-999pc;overflow:hidden;background:url('./img/btn_next.png') no-repeat 50% 50%;opacity:0.7}</p>

<p>#main_bn .bx-next:hover,#main_bn .bx-prev:hover{opacity:1}</p>

<p>