MEGABOX

Site renewal

responsive

pc

2019

GO SITE
chapter - 1

respon
sive

반응형 사이트로 구현하여, @media를 이용해
창 사이즈를 조절할 때마다 자동으로 사이트가
비율에 맞게 변화합니다. (1920, 1200, 1024, 900, 600)

HOVER ME !

chapter - 2

coding

media query
@media (max-width: 1290px) {
.container { width: 100%; }
}
                            
@media (max-width: 1200px) {
#mNav { display: block; }
.header .menu { display: none; }
.header .logo .lo2 { display: none; }
.header .logo .lo1 { margin: 12px 15px 9px 0; }
}
                     
@media (max-width: 1024px) {
.help .help_box1 { float: left; width: 49%; margin-right: 2%; }
.help .help_box2 { float: left; width: 49%; margin-right: 0%; }
.help .help_box3 { float: left; width: 100%; margin-top: 2%; }
.help .help_box3 h3 { display: none; }
.help .help_box3 .service { height: auto; }
.service li { width: 25%; height: auto; }
.service li:nth-child(1) { background: url(../img/i1.jpg) no-repeat top 20px center 80px;border-bottom: 0; border-right: 0; }
.service li:nth-child(2) { background: url(../img/i2.jpg) no-repeat top 20px center 80px;border-bottom: 0; }
.service li:nth-child(3) { background: url(../img/i3.jpg) no-repeat top 20px center 80px;border-right: 0;}
.service li:nth-child(4) { background: url(../img/i4.jpg) no-repeat top 20px center 80px; }
.service li a { padding-top: 100px; padding-bottom: 10px; }
}
                            
@media (max-width: 900px) {
#movie { background: #d9d7e0; padding: 16px; }
#movie .row { background: #fff; padding: 32px; }
.movie { padding: 0; }
.movie .ir_so { position: static; width: auto; height: auto; overflow: visibletext-indent: 0; line-height: normal; font-size: 18px; margin-bottom: 13px; font-weight700; }
.movie .movie_title { width: auto; margin-bottom: 20px; }
.movie .movie_title li { width: auto; border: 0; margin-left: 0; }	
.movie .movie_title li a { padding: 0; font-size: 14px; color: #999; margin-right: 20px font-weight: 500; }
.movie .movie_title li.active a { background: none; color: #333; border-bottom: solid #333; }
#event { background: #d9d7e0; padding: 0 16px 16px 16px; }
#event .row { background: #fff; padding: 32px; }
.event { padding: 0; }
.event h2 { font-size: 18px; margin-bottom: 13px; }
.event .event_box .event_left { width: 100%; margin-right: 0; }
.event .event_box .event_right { display: none; }
.opening { padding: 40px 0; }
.opening .open { width: 200px; }
.opening .open_num { width: 130px; }
.opening p { font-size: 18px; }
.opening .open_box { display: none; }
#new { background: #d9d7e0; padding: 0 16px 16px 16px; }
#new .row { background: #fff; padding: 32px; }
.new { padding: 0; }
.new h2 { font-size: 18px; margin-bottom: 13px; }
.new .new_left { margin-right: 0; height: 280px; }
.new .new_left .play { width: 80px; height: 80px;  }
.new .new_right { display: none; }
#help { background: #d9d7e0; padding: 0 16px 16px 16px; }
#help .row { background: #fff; padding: 32px; }
.help { padding-bottom: 0; }
.help h3 { font-size: 18px; margin-bottom: 13px; }
.help .help_box1 { width: 100%; margin-right: 0; }
.help .help_box2 { width: 100%; margin-top: 2%; }
.help .help_box3 { width: 100%; margin-top: 2%; }
.help .help_box3 h3 { display: block; }
#footer { padding: 0; }
.footer_sns { position: static; text-align: center; background: #352c2cpadding-bottom: 15px; }
.footer_sns .tel { display: none; }
.footer_info { text-align: center; padding: 5% 0; }
.footer_info h2 img { margin: 0 auto; }
.footer_info li { white-space: nowrap; }
.footer_info address br { display: none; }
}

@media (max-width: 600px) {
.row { padding: 0 16px; }
#header { position: fixed; left: 0; top: 0; width: 100%; z-index: 10000; background#fff; }
#mNav { top: 1px; right: 8px; }
.header .logo { width: 130px; }
.slider { margin-top: 50px; }
.banner .btn { display: none; }
#movie { padding: 8px 8px 0 8px; }
#movie .row { padding: 16px; }
#event { padding: 8px; }
#event .row { padding: 16px; }
#new { padding: 8px; }
#new .row { padding: 16px; }
#help { padding: 0px 8px 8px 8px; }
#help .row { padding: 16px; }
.help h3 { padding-top: 20px; }
.help > article:nth-child(1) h3 { padding-top: 0; }
.service li:nth-child(1) { background: url(../img/i1.jpg) no-repeat top 20px center 60px;border-bottom: 0; border-right: 0; }
.service li:nth-child(2) { background: url(../img/i2.jpg) no-repeat top 20px center 60px;border-bottom: 0; }
.service li:nth-child(3) { background: url(../img/i3.jpg) no-repeat top 20px center 60px;border-right: 0;}
.service li:nth-child(4) { background: url(../img/i4.jpg) no-repeat top 20px center 60px; }
.service li a { font-size: 14px; padding-top: 80px; }
TOP