테마 jelly 배너 질문
본문
배너 모바일에서도 반응형으로 사이즈 맞추고 싶은데 어떻게 해야되나요?
/*메인배너*/
#main_bn{width:100%;z-index:1;position:relative}
#main_bn ul li {height:600px;-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;}
#main_bn .bn-img{display:block;height:100%;width:100%;background-size:100% 100%;background-position:top center;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover; }
#main_bn .active{opacity:1}
#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}
#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;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
-webkit-text-shadow: 0 1px 2px rgba(0,0,0,0.2);
-moz-text-shadow: 0 1px 2px rgba(0,0,0,0.2);
text-shadow: 0 1px 2px rgba(0,0,0,0.2);}
#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;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
#main_bn .btn_detail:hover{ ; opacity:1;
-webkit-box-shadow: 0 6px 10px rgba(0,0,0,0.2);
-moz-box-shadow: 0 6px 10px rgba(0,0,0,0.2);
box-shadow: 0 6px 10px rgba(0,0,0,0.2);}
#main_bn .bx-controls{position:absolute;bottom:30px;left:50%;width:200px;margin-left:-100px;text-align:center;z-index:99}
#main_bn .bx-pager-item{display:inline-block;padding:0 8px}
#main_bn .bx-pager-link {display:block;background:#fff;opacity:0.5;border-radius:5px;width:6px;height:6px;text-indent:-999px;overflow:hidden}
#main_bn .active {opacity:1;
-webkit-box-shadow: 0 0 8px 5px rgba(255,255,255,0.6);
-moz-box-shadow: 0 0 8px 5px rgba(255,255,255,0.6) ;
box-shadow: 0 0 8px 5px rgba(255,255,255,0.6);}
#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}
#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}
#main_bn .bx-next:hover,#main_bn .bx-prev:hover{opacity:1}
답변을 작성하시기 전에 로그인 해주세요.