더불어숲2
2019. 12. 28. 16:55
반응형
메가박스 사이트 만들기
동영상 보며 코딩하기 -메가박스 사이트 만들기
web's 동영상 바로가기
열두번째 강의 : 오프닝 영역
평소 화면
max-width 960일때
max-width 768일때
max-width 600일때
<section id="opening">
<div class="container">
<div class="row">
<div class="opening">
<h2><span class="grand icon ir_pm">Grand Opening</span></h2>
<strong class="date icon ir_pm">2019.01 ~ 2019.03</strong>
<p class="desc">LIFE THEATER로 새롭게 시작하는 메가박스를 만나보세요!</p>
<div class="open_box">
<div>
<h3>리뉴얼 오픈</h3>
<p><em>경기도</em><strong>안양</strong>12월 8일</p>
</div>
<div>
<h3>리뉴얼 오픈</h3>
<p><em>경기도</em><strong>인덕원 사거리</strong>12월 8일</p>
</div>
<div>
<h3>리뉴얼 오픈</h3>
<p><em>경기도</em><strong>용인테크노밸리</strong>12월 8일</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- //opening -->
/*오프닝*/
.opening {padding: 100px 0; text-align: center; color: #bb9b51;}
.opening h2 {margin-bottom: 15px;}
.opening h2 .grand {background-position: 0 -175px; display: inline-block; width: 330px; height: 50px;}
.opening .date {background-position: 0 -225px; display: inline-block; width: 260px; height: 45px;}
.opening .desc {font-size: 35px; font-weight: 300; padding-bottom: 20px; background: url(../img/bar.png) no-repeat bottom center; background-size: 100%;}
.opening .open_box {overflow: hidden; padding: 20px 3% 0 3%;}
.opening .open_box > div {float: left; width: 27.333%; margin: 4% 3% 0 3%; box-sizing: border-box; background: rgba(0,0,0,0.5); border: 1px solid #3e4b44;}
.opening .open_box > div h3 {color: #fff; font-weight: 300; border: 1px solid #6e3abb; margin-top: -24px; font-size: 19px; display: inline-block; padding: 10px 20px; background: #551e9b;}
.opening .open_box > div p {font-size: 23px; color: #fff; font-weight: 700; padding: 6% 0 10% 0;}
.opening .open_box > div em {display: block; font-weight: bold;}
.opening .open_box > div strong {display: block; font-weight: bold;}
@media (max-width: 960px){
.slider {height: 500px;}
.slider .swiper-slide h2 {margin-top: 170px; font-size: 37px; line-height: 45px;}
.slider .swiper-slide h2:after {bottom: -15px;}
.slider .swiper-slide h2 em {font-size: 34px;}
.slider .swiper-slide p {font-size: 16px; padding-top: 35px;}
.movie_title ul {width: auto;}
.movie_title li {width: 25%; box-sizing: border-box;}
.opening {padding: 50px 0;}
.opening .open_box {display: none;}
.opening .desc {background: none; font-size: 25px;}
}
@media (max-width: 768px){
body {background: #d9d7e0;}
.row {padding: 0 16px;}
.mNav { right: 6px;}
.header h1 {text-align: left;}
.header h1 strong {display: none;}
#movie {background: none;}
#movie .row {background: #fff; margin: 24px 24px 0 24px; padding: 24px;}
#movie .ir_so {
position: static;
width: auto; height: auto; line-height: normal;
text-indent: 0; font-size: 24px; font-weight: bold; padding-bottom: 20px;}
.movie {padding: 0;}
.movie_title {margin-bottom: 30px;}
.movie_title ul {position: relative; padding-bottom: 10px;}
.movie_title ul:before {content: ''; position: absolute; z-index: 1; left: 0; bottom: 0; width: 100%; height: 2px; background: #e1e1e1; }
.movie_title li {width: auto; border: 0;}
.movie_title li a {position: relative; font-size: 18px; color: #666; font-weight: 400; padding: 0; margin-right: 35px;}
.movie_title li.active a:before {content: ''; position: absolute; z-index: 2; left: 0; bottom: -10px; width: 100%; height: 2px; background: #666;}
.movie_title li.active a {background: none; color: #666;}
#event .row {padding: 24px;}
.event {padding: 24px; background: #fff;}
.event h2 {font-size: 24px; font-weight: 700;}
.event .event_left {width: 100%; margin-right: 0;}
.event .event_right {display: none;}
.opening {margin: 0;}
}
@media (max-width: 600px){
.slider {height: 400px;}
.slider .swiper-slide h2 {margin-top: 140px; font-size: 24px; line-height: 30px;}
.slider .swiper-slide h2:after {bottom: -5px;}
.slider .swiper-slide h2 em {font-size: 20px;}
.slider .swiper-slide p {font-size: 14px; padding-top: 25px;}
.banner_menu {top: 16px;}
.banner_menu .bm_right li.white a {font-size: 14px padding: 3px 5px 5px 5px; color: #fff; background: rgba(0,0,0,0.6); border-color: #fff;}
.banner_menu .bm_right li.purple a {font-size: 14px padding: 3px 5px 5px 5px; color: #fff; background: rgba(0,0,0,0.6); border-color: #fff;}
.swiper-pagination-bullet {width: 13px !important; height: 13px !important;}
#movie .container {position: relative;}
#movie .container:after {content: ''; position: absolute; z-index: 20; top: 0; right: 0; width: 8px; height: 100%; background: #d9d7e0;}
#movie .row {position: relative; margin: 8px; padding: 16px; margin-right: 0; padding-right: 0;}
#movie .row:after {content: ''; position: absolute; top: 0; right: 0; z-index: 10; width: 24px; height: 100%; background: #fff;}
#movie .ir_so {font-size: 18px; padding-bottom: 10px;}
.movie_title {margin-bottom: 20px;}
.movie_title ul {padding-bottom: 8px; white-space: nowrap; overflow-x: auto;}
.movie_title li a {font-size: 14px; margin-right: 15px;}
.movie_title li.active a:before {bottom: -8px;}
.movie_chart{position: relative; z-index: 30;}
.movie_chart > div > div > div .infor {padding: 5px;}
.movie_chart > div > div > div .infor h3 {text-align: center; margin: 5px 0 10px;}
.movie_chart > div > div > div .infor h3 strong {display: block; font-size: 19px; color: #222; font-weight: 300;}
.movie_chart > div > div > div .infor h3 span {display: none;}
.movie_chart > div > div > div .infor .infor_btn a {width: 52%; margin-left: 24%; display: block; margin-right: 0; padding: 5px; color: #777; margin-bottom: 5px; box-sizing: border-box; font-size: 14px; background: none; border: 1px solid #ddd;}
.movie_chart > div > div > div .infor .infor_btn a:last-child {display: none;}
#event .row {padding: 0 8px;}
.event {padding: 16px;}
.event h2 {font-size: 18px; margin-bottom: 10px;}
#opening {margin: 8px 0;}
.opening {padding: 20px 0;}
.opening h2 {margin-bottom: 10px;}
.opening h2 .grand {background-size: 300px; background-position: 0 -105px; width: 197px; height: 24px;}
.opening .date {display: none;}
.opening .desc {font-size: 16px; font-weight: 400; padding-bottom: 0;}
}반응형