KCP 창업 지원, 수수료 국내최저 2.9% 제공 이벤트!

테마 jelly 배너 질문

그누보드5
영카트5
스터디
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티
부가서비스
KCP 이벤트!
테마 jelly 배너 질문

QA

테마 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}
이 글을 내 페이스북 계정으로 보내기 이 글을 내 트위터 계정으로 보내기

이 질문에 댓글 쓰기 :

답변을 작성하시기 전에 로그인 해주세요.
전체 12,742
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

(주)에스아이알소프트 (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT