티스토리 뷰
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="webstoryboy">
<meta name="description" content="메가박스 사이트 따라하면서 배우는 튜토리얼입니다.">
<meta name="keywords" content="메가박스, 유투브, 영화, 최신영화, 영화관, CGV, 롯데시네마, 웹스토리보이, 웹스, 사이트 만들기, 따라하기">
<title>메가박스 사이트 코딩하기</title>
<!-- css -->
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/style13.css">
<link rel="stylesheet" href="assets/css/swiper.css">
<link rel="stylesheet" href="assets/css/font-awesome.css">
<!-- 파비콘 -->
<link rel="shortcut icon" href="assets/icons/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="assets/icons/favicon_72.png" />
<link rel="apple-touch-icon-precomposed" sizes="96x96" href="assets/icons/favicon_96.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/icons/favicon_144.png" />
<link rel="apple-touch-icon-precomposed" sizes="192x192" href="assets/icons/favicon_192.png" />
<!-- 페이스북 메타 태그 -->
<meta property="og:title" content="메가박스 사이트 만들기" />
<meta property="og:url" content="https://github.com/webstoryboy/megabox2019" />
<meta property="og:image" content="https://webstoryboy.github.io/megabox2019/mega.jpg" />
<meta property="og:description" content="메가박스 사이트 따라하면서 배우는 튜토리얼입니다." />
<!-- 트위터 메타 태그 -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="메가박스 사이트 만들기">
<meta name="twitter:url" content="https://github.com/webstoryboy/megabox2019/">
<meta name="twitter:image" content="https://webstoryboy.github.io/megabox2019/mega.jpg">
<meta name="twitter:description" content="메가박스 사이트 따라하면서 배우는 튜토리얼입니다.">
<!-- 웹폰트 -->
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap" rel="stylesheet">
<!-- HTLM5shiv ie6~8 -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.min.js"></script>
<script type="text/javascript">
alert("현재 브라우저는 지원하지 않습니다. 크롬 브라우저를 추천합니다.!");
</script>
<![endif]-->
</head>
<body>
<header id="header">
<div class="container">
<div class="row">
<div class="header clearfix">
<h1>
<a href="#">
<em><img src="assets/img/logo.png" alt="MEGABOX"></em>
<strong><img src="assets/img/logo-sub.png" alt="LIFE THEATER"></strong>
</a>
</h1>
<nav id="mNav">
<h2 class="ir_so">메가박스 전체메뉴</h2>
<a href="#" class="ham"><span></span></a>
</nav>
<nav class="nav">
<ul class="clearfix">
<li><a href="#">영화</a></li>
<li><a href="#">큐레이션</a></li>
<li><a href="#">영화관</a></li>
<li><a href="#">특별관</a></li>
<li><a href="#">스토어</a></li>
<li><a href="#">이벤트</a></li>
<li><a href="#">로그인</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<!-- //header -->
<section id="banner">
<h2 class="ir_so">최신 영화 소식</h2>
<div class="banner_menu">
<div class="container">
<div class="row">
<div class="bm_left">
<ul>
<li class="total"><a href="#"><i class="fa fa-bars" aria-hidden="true"></i> 전체메뉴</a></li>
<li class="line"><a href="#">필름 소사이어티</a></li>
<li><a href="#">클래식 소사이어티</a></li>
</ul>
</div>
<div class="bm_right">
<ul>
<li class="line"><a href="#">고객센터</a></li>
<li class="line"><a href="#">멤버쉽</a></li>
<li><a href="#">VIP</a></li>
</ul>
<ul>
<li class="white"><a href="#">상영시간표</a></li>
<li class="purple"><a href="#">빠른 예매</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="slider">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide ss1">
<div class="container">
<div class="row">
<h2>캡틴 마블 <em>Captain Marvel</em></h2>
<p>새로운 히어로, 어벤져스의 희망</p>
</div>
</div>
</div>
<div class="swiper-slide ss2">
<div class="container">
<div class="row">
<h2>캡틴 마블 <em>Captain Marvel</em></h2>
<p>새로운 히어로, 어벤져스의 희망</p>
</div>
</div>
</div>
<div class="swiper-slide ss3">
<div class="container">
<div class="row">
<h2>캡틴 마블 <em>Captain Marvel</em></h2>
<p>새로운 히어로, 어벤져스의 희망</p>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</section>
<!-- //banner -->
<section id="movie">
<div class="container">
<div class="row">
<div class="movie">
<h2 class="ir_so">영화 예매</h2>
<div class="movie_title">
<ul>
<li class="active"><a href="#">박스오피스</a></li>
<li><a href="#">최신개봉작</a></li>
<li><a href="#">상영예정작</a></li>
<li><a href="#">큐레이션</a></li>
</ul>
</div>
<div class="movie_chart">
<div class="swiper-container2">
<div class="chart_con1 swiper-wrapper">
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster01.jpg" srcset="assets/img/poster01@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>1</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon all ir_pm">전체관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster02.jpg" srcset="assets/img/poster02@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>2</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span class="icon m ir_pm">
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a12 ir_pm">12세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster03.jpg" srcset="assets/img/poster03@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>3</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a15 ir_pm">15세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster04.jpg" srcset="assets/img/poster04@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>4</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster01.jpg" srcset="assets/img/poster01@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>1</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon all ir_pm">전체관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster02.jpg" srcset="assets/img/poster02@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>2</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span class="icon m ir_pm">
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a12 ir_pm">12세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster03.jpg" srcset="assets/img/poster03@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>3</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a15 ir_pm">15세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster04.jpg" srcset="assets/img/poster04@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>4</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
</div>
</div>
<!-- //chart_con1 -->
<div class="swiper-container2">
<div class="chart_con2 swiper-wrapper">
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster05.jpg" srcset="assets/img/poster05@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>1</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon all ir_pm">전체관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster06.jpg" srcset="assets/img/poster06@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>2</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span class="icon m ir_pm">
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a12 ir_pm">12세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster07.jpg" srcset="assets/img/poster07@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>3</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a15 ir_pm">15세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster08.jpg" srcset="assets/img/poster08@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>4</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster05.jpg" srcset="assets/img/poster05@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>1</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon all ir_pm">전체관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster06.jpg" srcset="assets/img/poster06@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>2</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span class="icon m ir_pm">
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a12 ir_pm">12세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster07.jpg" srcset="assets/img/poster07@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>3</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a15 ir_pm">15세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster08.jpg" srcset="assets/img/poster08@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>4</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
</div>
</div>
<!-- //chart_con2 -->
<div class="swiper-container2">
<div class="chart_con3 swiper-wrapper">
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster06.jpg" srcset="assets/img/poster06@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>1</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon all ir_pm">전체관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster07.jpg" srcset="assets/img/poster07@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>2</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span class="icon m ir_pm">
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a12 ir_pm">12세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster08.jpg" srcset="assets/img/poster08@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>3</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a15 ir_pm">15세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster09.jpg" srcset="assets/img/poster09@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>4</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster06.jpg" srcset="assets/img/poster06@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>1</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon all ir_pm">전체관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster07.jpg" srcset="assets/img/poster07@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>2</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span class="icon m ir_pm">
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a12 ir_pm">12세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster08.jpg" srcset="assets/img/poster08@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>3</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a15 ir_pm">15세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster09.jpg" srcset="assets/img/poster09@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>4</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
</div>
</div>
<!-- //chart_con3 -->
<div class="swiper-container2">
<div class="chart_con4 swiper-wrapper">
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster07.jpg" srcset="assets/img/poster07@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>1</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon all ir_pm">전체관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster08.jpg" srcset="assets/img/poster08@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>2</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span class="icon m ir_pm">
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a12 ir_pm">12세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster09.jpg" srcset="assets/img/poster09@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>3</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a15 ir_pm">15세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster10.jpg" srcset="assets/img/poster10@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>4</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster07.jpg" srcset="assets/img/poster07@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>1</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon all ir_pm">전체관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster08.jpg" srcset="assets/img/poster08@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>2</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span class="icon m ir_pm">
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a12 ir_pm">12세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster09.jpg" srcset="assets/img/poster09@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>3</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a15 ir_pm">15세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster10.jpg" srcset="assets/img/poster10@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>4</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
</div>
</div>
<!-- //chart_con4 -->
</div>
</div>
</div>
</div>
</section>
<!-- //movie -->
<section id="event">
<div class="container">
<div class="row">
<div class="event">
<h2>새로운 이벤트</h2>
<div class="event_left">
<div class="event_slider">
<img src="assets/img/event01.jpg" srcset="assets/img/event01@2.jpg 2x" alt="시티 패키지">
</div>
<div class="event_box1">
<img src="assets/img/event02.jpg" srcset="assets/img/event02@2.jpg 2x" alt="남포항점 2019 시즌할인권">
</div>
<div class="event_box2">
<img src="assets/img/event03.jpg" srcset="assets/img/event03@2.jpg 2x" alt="설 선물 이수점 전용 관람권 런칭">
</div>
</div>
<div class="event_right">
<img src="assets/img/event04.jpg" srcset="assets/img/event04@2.jpg 2x" alt="사표 대신 영화표">
</div>
</div>
</div>
</div>
</section>
<!-- //event -->
<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 -->
<section id="new">
<div class="container">
<div class="row">
<div class="new">
<h2>새로운 영화</h2>
<div class="new_left">
<div class="play">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 120 120" style="enable-background:new 0 0 120 120;" xml:space="preserve">
<circle class="st0" cx="60" cy="60.4" r="56"/>
<path class="st1" d="M81,65.4c4.8-2.8,4.8-7.2,0-10L53.5,39.6c-4.8-2.8-8.7-0.5-8.7,5v31.7c0,5.5,3.9,7.8,8.7,5L81,65.4z"/>
</svg>
</div>
</div>
<div class="new_right"></div>
</div>
</div>
</div>
</section>
<!-- //new -->
<!-- 자바스크립트 라이브러리 -->
<script src="assets/js/jquery.min_1.12.4.js"></script>
<script src="assets/js/modernizr-custom.js"></script>
<script src="assets/js/ie-checker.js"></script>
<script src="assets/js/swiper.min.js"></script>
<script>
//영화 차트 탭메뉴
var movBtn = $(".movie_title > ul > li");
var movCont = $(".movie_chart > div");
movCont.hide().eq(0).show();
movBtn.click(function(e){
e.preventDefault();
var target = $(this);
var index = target.index();
movBtn.removeClass("active");
target.addClass("active");
movCont.css("display","none");
movCont.eq(index).css("display","block");
});
//배너 이미지 슬라이드
var mySwiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
},
autoplay: {
delay: 5000,
},
});
//영화차트 이미지 슬라이드
var mySwiper = new Swiper('.swiper-container2', {
slidesPerView: 4,
spaceBetween: 24,
// mousewheel: {
// invert: true,
// },
keyboard: {
enabled: true,
onlyInViewport: false,
},
autoplay: {
delay: 6000,
},
breakpoints:{
600: {
slidesPerView: 1.4,
spaceBetween:24
},
768: {
slidesPerView: 2,
spaceBetween:24
},
960: {
slidesPerView: 3,
spaceBetween:24
}
}
});
</script>
</body>
</html>
</code></pre>
<p> </p>
<pre class="line-numbers language-css"><code><pre class="line-numbers language-html xml"><code><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="webstoryboy">
<meta name="description" content="메가박스 사이트 따라하면서 배우는 튜토리얼입니다.">
<meta name="keywords" content="메가박스, 유투브, 영화, 최신영화, 영화관, CGV, 롯데시네마, 웹스토리보이, 웹스, 사이트 만들기, 따라하기">
<title>메가박스 사이트 코딩하기</title>
<!-- css -->
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/style14.css">
<link rel="stylesheet" href="assets/css/swiper.css">
<link rel="stylesheet" href="assets/css/font-awesome.css">
<!-- 파비콘 -->
<link rel="shortcut icon" href="assets/icons/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="assets/icons/favicon_72.png" />
<link rel="apple-touch-icon-precomposed" sizes="96x96" href="assets/icons/favicon_96.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/icons/favicon_144.png" />
<link rel="apple-touch-icon-precomposed" sizes="192x192" href="assets/icons/favicon_192.png" />
<!-- 페이스북 메타 태그 -->
<meta property="og:title" content="메가박스 사이트 만들기" />
<meta property="og:url" content="https://github.com/webstoryboy/megabox2019" />
<meta property="og:image" content="https://webstoryboy.github.io/megabox2019/mega.jpg" />
<meta property="og:description" content="메가박스 사이트 따라하면서 배우는 튜토리얼입니다." />
<!-- 트위터 메타 태그 -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="메가박스 사이트 만들기">
<meta name="twitter:url" content="https://github.com/webstoryboy/megabox2019/">
<meta name="twitter:image" content="https://webstoryboy.github.io/megabox2019/mega.jpg">
<meta name="twitter:description" content="메가박스 사이트 따라하면서 배우는 튜토리얼입니다.">
<!-- 웹폰트 -->
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap" rel="stylesheet">
<!-- HTLM5shiv ie6~8 -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.min.js"></script>
<script type="text/javascript">
alert("현재 브라우저는 지원하지 않습니다. 크롬 브라우저를 추천합니다.!");
</script>
<![endif]-->
</head>
<body>
<header id="header">
<div class="container">
<div class="row">
<div class="header clearfix">
<h1>
<a href="#">
<em><img src="assets/img/logo.png" alt="MEGABOX"></em>
<strong><img src="assets/img/logo-sub.png" alt="LIFE THEATER"></strong>
</a>
</h1>
<nav id="mNav">
<h2 class="ir_so">메가박스 전체메뉴</h2>
<a href="#" class="ham"><span></span></a>
</nav>
<nav class="nav">
<ul class="clearfix">
<li><a href="#">영화</a></li>
<li><a href="#">큐레이션</a></li>
<li><a href="#">영화관</a></li>
<li><a href="#">특별관</a></li>
<li><a href="#">스토어</a></li>
<li><a href="#">이벤트</a></li>
<li><a href="#">로그인</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<!-- //header -->
<section id="banner">
<h2 class="ir_so">최신 영화 소식</h2>
<div class="banner_menu">
<div class="container">
<div class="row">
<div class="bm_left">
<ul>
<li class="total"><a href="#"><i class="fa fa-bars" aria-hidden="true"></i> 전체메뉴</a></li>
<li class="line"><a href="#">필름 소사이어티</a></li>
<li><a href="#">클래식 소사이어티</a></li>
</ul>
</div>
<div class="bm_right">
<ul>
<li class="line"><a href="#">고객센터</a></li>
<li class="line"><a href="#">멤버쉽</a></li>
<li><a href="#">VIP</a></li>
</ul>
<ul>
<li class="white"><a href="#">상영시간표</a></li>
<li class="purple"><a href="#">빠른 예매</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="slider">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide ss1">
<div class="container">
<div class="row">
<h2>캡틴 마블 <em>Captain Marvel</em></h2>
<p>새로운 히어로, 어벤져스의 희망</p>
</div>
</div>
</div>
<div class="swiper-slide ss2">
<div class="container">
<div class="row">
<h2>캡틴 마블 <em>Captain Marvel</em></h2>
<p>새로운 히어로, 어벤져스의 희망</p>
</div>
</div>
</div>
<div class="swiper-slide ss3">
<div class="container">
<div class="row">
<h2>캡틴 마블 <em>Captain Marvel</em></h2>
<p>새로운 히어로, 어벤져스의 희망</p>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</section>
<!-- //banner -->
<section id="movie">
<div class="container">
<div class="row">
<div class="movie">
<h2 class="ir_so">영화 예매</h2>
<div class="movie_title">
<ul>
<li class="active"><a href="#">박스오피스</a></li>
<li><a href="#">최신개봉작</a></li>
<li><a href="#">상영예정작</a></li>
<li><a href="#">큐레이션</a></li>
</ul>
</div>
<div class="movie_chart">
<div class="swiper-container2">
<div class="chart_con1 swiper-wrapper">
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster01.jpg" srcset="assets/img/poster01@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>1</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon all ir_pm">전체관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster02.jpg" srcset="assets/img/poster02@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>2</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span class="icon m ir_pm">
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a12 ir_pm">12세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster03.jpg" srcset="assets/img/poster03@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>3</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a15 ir_pm">15세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster04.jpg" srcset="assets/img/poster04@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>4</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster01.jpg" srcset="assets/img/poster01@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>1</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon all ir_pm">전체관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster02.jpg" srcset="assets/img/poster02@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>2</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span class="icon m ir_pm">
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a12 ir_pm">12세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster03.jpg" srcset="assets/img/poster03@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>3</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a15 ir_pm">15세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster04.jpg" srcset="assets/img/poster04@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>4</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
</div>
</div>
<!-- //chart_con1 -->
<div class="swiper-container2">
<div class="chart_con2 swiper-wrapper">
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster05.jpg" srcset="assets/img/poster05@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>1</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon all ir_pm">전체관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster06.jpg" srcset="assets/img/poster06@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>2</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span class="icon m ir_pm">
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a12 ir_pm">12세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster07.jpg" srcset="assets/img/poster07@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>3</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a15 ir_pm">15세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster08.jpg" srcset="assets/img/poster08@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>4</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster05.jpg" srcset="assets/img/poster05@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>1</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon all ir_pm">전체관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster06.jpg" srcset="assets/img/poster06@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>2</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span class="icon m ir_pm">
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a12 ir_pm">12세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster07.jpg" srcset="assets/img/poster07@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>3</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a15 ir_pm">15세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster08.jpg" srcset="assets/img/poster08@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>4</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
</div>
</div>
<!-- //chart_con2 -->
<div class="swiper-container2">
<div class="chart_con3 swiper-wrapper">
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster06.jpg" srcset="assets/img/poster06@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>1</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon all ir_pm">전체관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster07.jpg" srcset="assets/img/poster07@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>2</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span class="icon m ir_pm">
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a12 ir_pm">12세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster08.jpg" srcset="assets/img/poster08@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>3</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a15 ir_pm">15세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster09.jpg" srcset="assets/img/poster09@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>4</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster06.jpg" srcset="assets/img/poster06@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>1</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon all ir_pm">전체관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster07.jpg" srcset="assets/img/poster07@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>2</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span class="icon m ir_pm">
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a12 ir_pm">12세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster08.jpg" srcset="assets/img/poster08@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>3</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a15 ir_pm">15세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster09.jpg" srcset="assets/img/poster09@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>4</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
</div>
</div>
<!-- //chart_con3 -->
<div class="swiper-container2">
<div class="chart_con4 swiper-wrapper">
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster07.jpg" srcset="assets/img/poster07@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>1</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon all ir_pm">전체관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster08.jpg" srcset="assets/img/poster08@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>2</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span class="icon m ir_pm">
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a12 ir_pm">12세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster09.jpg" srcset="assets/img/poster09@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>3</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a15 ir_pm">15세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster10.jpg" srcset="assets/img/poster10@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>4</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster07.jpg" srcset="assets/img/poster07@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>1</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon all ir_pm">전체관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster08.jpg" srcset="assets/img/poster08@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>2</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span class="icon m ir_pm">
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a12 ir_pm">12세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster09.jpg" srcset="assets/img/poster09@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>3</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a15 ir_pm">15세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster10.jpg" srcset="assets/img/poster10@2.jpg 2x" alt="포스터1">
</figure>
<div class="rank"><strong>4</strong></div>
<div class="mx">
<span class="icon m ir_pm">MX</span>
<span class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세관람가</span><strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
</div>
</div>
<!-- //chart_con4 -->
</div>
</div>
</div>
</div>
</section>
<!-- //movie -->
<section id="event">
<div class="container">
<div class="row">
<div class="event">
<h2>새로운 이벤트</h2>
<div class="event_left">
<div class="event_slider">
<img src="assets/img/event01.jpg" srcset="assets/img/event01@2.jpg 2x" alt="시티 패키지">
</div>
<div class="event_box1">
<img src="assets/img/event02.jpg" srcset="assets/img/event02@2.jpg 2x" alt="남포항점 2019 시즌할인권">
</div>
<div class="event_box2">
<img src="assets/img/event03.jpg" srcset="assets/img/event03@2.jpg 2x" alt="설 선물 이수점 전용 관람권 런칭">
</div>
</div>
<div class="event_right">
<img src="assets/img/event04.jpg" srcset="assets/img/event04@2.jpg 2x" alt="사표 대신 영화표">
</div>
</div>
</div>
</div>
</section>
<!-- //event -->
<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 -->
<section id="new">
<div class="container">
<div class="row">
<div class="new">
<h2>새로운 영화</h2>
<div class="new_left">
<div class="play">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 120 120" style="enable-background:new 0 0 120 120;" xml:space="preserve">
<circle class="st0" cx="60" cy="60.4" r="56"/>
<path class="st1" d="M81,65.4c4.8-2.8,4.8-7.2,0-10L53.5,39.6c-4.8-2.8-8.7-0.5-8.7,5v31.7c0,5.5,3.9,7.8,8.7,5L81,65.4z"/>
</svg>
</div>
</div>
<div class="new_right">
<h3 class="title">로그 원 : 스타워즈 스토리</h3>
<span class="release">2016년 10월 28일 개봉</span>
<div class="star">
<span class="icon star1"></span>
<span class="icon star1"></span>
<span class="icon star1"></span>
<span class="icon star2"></span>
<span class="icon star0"></span>
<strong>7.5/10</strong>
</div>
<ul class="summary">
<li class="genre"><span class="bar">액션</span><span>미국, 오스트레일리아</span></li>
<li class="age"><span class="bar">142분</span><span>12세 이상 관람가</span></li>
<li class="desc">단숨에 행성 하나를 파괴할 위력을 지닌 데스 스타가 완성되기 전에 설계도를 훔쳐내야 하는 이번 작전의 성공 확률은 고작 2.4%. 생사도 모르는 아버지에 얽힌 비밀을 밝히려는 진을 ...비롯해 유능한 정보 요원 ‘카시안’(디에고 루나), 두 눈이 멀었지만 탁월한 무술 실력을 지닌 ‘치루트’(견자단), 전투 베테랑 ‘베이즈’, 파일럿 ‘보디’, 시니컬한 드로이드 ‘K-2SO’까지 합류, 거대한 전쟁을 끝낼 ‘로그 원’이 이끄는 가장 비밀스런 작전이 시작되는데…</li>
</ul>
<div class="select">
<div class="s1">
<label for="udate" class="ir_so">날짜</label>
<input type="text" id="udate" name="udate" value="2019년 1월 25일" class="ui_select2">
</div>
<div class="s2">
<label for="utime" class="ir_so"> tlrks</label>
<select id="utime" name="utime" class="ui_select2">
<option value="오전 0:00">오전 0:00</option>
<option value="오전 1:00">오전 1:00</option>
<option value="오전 2:00">오전 2:00</option>
<option value="오전 3:00">오전 3:00</option>
<option value="오전 4:00">오전 4:00</option>
<option value="오전 5:00">오전 5:00</option>
<option value="오전 6:00">오전 6:00</option>
<option value="오전 7:00">오전 7:00</option>
<option value="오전 8:00">오전 8:00</option>
<option value="오전 9:00">오전 9:00</option>
<option value="오전 10:00">오전 10:00</option>
<option value="오전 11:00">오전 11:00</option>
<option value="오전 12:00">오전 12:00</option>
<option value="오후 1:00">오후 1:00</option>
<option value="오후 2:00">오후 2:00</option>
<option value="오후 3:00">오후 3:00</option>
<option value="오후 4:00">오후 4:00</option>
<option value="오후 5:00">오후 5:00</option>
<option value="오후 6:00">오후 6:00</option>
<option value="오후 7:00">오후 7:00</option>
<option value="오후 8:00">오후 8:00</option>
<option value="오후 9:00">오후 9:00</option>
<option value="오후 10:00">오후 10:00</option>
<option value="오후 11:00">오후 11:00</option>
<option value="오후 12:00">오후 12:00</option>
</select>
</div>
<div class="s3">
<label for="utext" class="ir_so">주소 또는 도로명을 입력해주세요.</label>
<input type="text" id="utext" name="utext" class="ui_input3" placeholder="주소 또는 도로명을 입력해주세요.">
</div>
<div class="btn">
<a href="" class="white">좌석 확인</a>
<a href="" class="purple">예매 하기</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- //new -->
<!-- 자바스크립트 라이브러리 -->
<script src="assets/js/jquery.min_1.12.4.js"></script>
<script src="assets/js/modernizr-custom.js"></script>
<script src="assets/js/ie-checker.js"></script>
<script src="assets/js/swiper.min.js"></script>
<script>
//영화 차트 탭메뉴
var movBtn = $(".movie_title > ul > li");
var movCont = $(".movie_chart > div");
movCont.hide().eq(0).show();
movBtn.click(function(e){
e.preventDefault();
var target = $(this);
var index = target.index();
movBtn.removeClass("active");
target.addClass("active");
movCont.css("display","none");
movCont.eq(index).css("display","block");
});
//배너 이미지 슬라이드
var mySwiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
},
autoplay: {
delay: 5000,
},
});
//영화차트 이미지 슬라이드
var mySwiper = new Swiper('.swiper-container2', {
slidesPerView: 4,
spaceBetween: 24,
// mousewheel: {
// invert: true,
// },
keyboard: {
enabled: true,
onlyInViewport: false,
},
autoplay: {
delay: 6000,
},
breakpoints:{
600: {
slidesPerView: 1.4,
spaceBetween:24
},
768: {
slidesPerView: 2,
spaceBetween:24
},
960: {
slidesPerView: 3,
spaceBetween:24
}
}
});
</script>
</body>
</html>
@charset "utf-8";
/* 레이아웃 */
#mNav {display: none; position: absolute; top: 10px; right: 14px;}
#header {width: 100%; border-bottom: 1px solid #c6c6c6; background-color: #fff;}
#banner {position: relative; }
#movie {background-color: #f8f8f8;}
#event {}
#opening {margin: 17px 0; background: url(../img/bg01.jpg) no-repeat center top; background-size: cover;}
/* 가운데 영역 */
.container {position: relative; width: 1280px; margin: 0 auto; background: rgba(0,0,0,0); }
/* 로우 영역 */
.row {padding: 0 28px;}
/* 모바일 메뉴 */
.ham {display: block; width: 25px; height: 10px; background: rgba(0,0,0,0); padding: 15px 10px 10px 10px;}
.ham span {position: relative; display: block; width: 25px; height: 4px; background: #39106a;}
.ham span:before {
content: '';
width: 25px; height: 4px; background: #39106a;
position: absolute; left: 0; bottom: -7px;
}
.ham span:after {
content: '';
width: 25px; height: 4px; background: #39106a;
position: absolute; left: 0; top: -7px;
}
/* 헤더 영역 */
.header h1 {float: left;}
.header h1 em {padding: 15px 8px 5px 0; display: inline-block;}
.header h1 em img {width: 155px;}
.header h1 strong {display: block; position: absolute; left: 194px; top: 23px;}
.header h1 strong img {width: 126px;}
.header .nav {float: right;}
.header .nav ul {border-left: 1px solid #c6c6c6}
.header .nav ul li {float: left; width: 103px; text-align: center; border-right: 1px solid #c6c6c6;}
.header .nav ul li a {display: block; padding: 19px 10px; font-size: 17px; font-weight: 700; color: #444;}
/* 배너 */
.banner_menu {overflow: hidden; position: absolute; left: 0; top: 20px; width: 100%; height: 100px; z-index: 10;}
.banner_menu a {color: #fff; font-size: 16px; transition: all 0.3s;}
.banner_menu a:hover {color: #c1c1c1;}
.banner_menu .bm_left {float: left;}
.banner_menu .bm_left ul {padding-top: 7px;}
.banner_menu .bm_left li {display: inline; position: relative; margin-right: 30px;}
.banner_menu .bm_left li.total {margin-right: 20px;}
.banner_menu .bm_left li.total a {font-size: 14px; padding: 3px 10px; display: inline-block; border: 1px solid #fff; transition: all 0.3s;}
.banner_menu .bm_left li.total a:hover {background: #fff; border-color: #000; color: #000;}
.banner_menu .bm_right {float: right; overflow: hidden;}
.banner_menu .bm_right ul {float: left;}
.banner_menu .bm_right ul:first-child {padding-top: 7px;}
.banner_menu .bm_right li {position: relative; display: inline; text-align: center; margin-right: 20px;}
.banner_menu .bm_right li.line {margin-right: 30px;}
.banner_menu .bm_right li.white {margin-right: 10px;}
.banner_menu .bm_right li.white a {width: 80px; background-color: #fff; color: #3a0e6a; padding: 7px 30px 9px 30px; display: inline-block; border: 1px solid #fff;}
.banner_menu .bm_right li.purple {margin-right: 0;}
.banner_menu .bm_right li.purple a {width: 80px; background-color: #3a0e6a; color: #fff; padding: 7px 30px 9px 30px; display: inline-block; border: 1px solid #6e40c4;}
.banner_menu li.line:after {content: ''; width: 1px; height: 14px; background: #fff; position: absolute; right: -18px; top: 2px;}
/* 슬라이드 */
.slider {width: 100%; height: 600px;}
.slider .ss1 {background: url(../img/swiper01.jpg) no-repeat center center; background-size: cover;}
.slider .ss2 {background: url(../img/swiper01.jpg) no-repeat center center; background-size: cover;}
.slider .ss3 {background: url(../img/swiper01.jpg) no-repeat center center; background-size: cover;}
.slider .swiper-slide h2 {position: relative; display: inline-block; font-size: 62px; line-height: 70px; color: #fff; margin-top: 200px;}
.slider .swiper-slide h2:after {content: ''; width: 100%; height: 1px; background: rgba(255,255,255,0.3); position: absolute; left: 0; bottom: -35px;}
.slider .swiper-slide h2 em {display: block; font-size: 59px; font-weight: 100;}
.slider .swiper-slide p {font-size: 27px; color: #fff; padding-top: 55px;}
/* 무비 */
.movie {padding: 100px 0;}
.movie_title {margin-bottom: 60px;}
.movie_title ul {overflow: hidden; width: 848px; margin: 0 auto;}
.movie_title li {float: left; width: 210px; text-align: center; border: 1px solid #c4c4c4; margin-right: -1px;}
.movie_title li a {display: block; padding: 15px 0; font-size: 18px; color: #666; font-weight: 700;}
.movie_title li.active a {background: #666; color: #fff;}
.movie_chart {overflow: hidden;}
.movie_chart > div > div > div {float: left; width: 292px; margin-right: 18px;}
.movie_chart > div > div > div:last-child {margin-right: 0;}
.movie_chart > div > div > div .poster {position: relative;}
.movie_chart > div > div > div .poster img {display: block;}
.movie_chart > div > div > div .poster .rank {position: absolute; top: 17px; left: 0; width: 50px; height: 50px; font-size: 22px; box-shadow: 3px 3px 8px rgba(0,0,0,0.5); line-height: 50px; background-color: #38116a; text-align: center;}
.movie_chart > div > div > div .poster .rank strong {color: #fff; text-shadow: 2px 2px 3px rgba(0,0,0,1);}
.movie_chart > div > div > div .poster .mx {position: absolute; top: 17px; right: 17px;}
.movie_chart > div > div > div .poster .mx span {width: 103px; height: 25px; display: block;}
.movie_chart > div > div > div .poster .mx .m {background-position: 0 -75px;}
.movie_chart > div > div > div .poster .mx .b {background-position: 0 -100px;}
.movie_chart > div > div > div .infor {background: #fff; padding: 17px; border: 1px solid #d9d9d9;}
.movie_chart > div > div > div .infor h3 {color: #333; font-size: 30px; font-weight: 700; margin-bottom: 20px;}
.movie_chart > div > div > div .infor h3 strong{}
.movie_chart > div > div > div .infor h3 span {width: 29px; height: 29px; display: inline-block; margin-top: 9px; vertical-align: -2px;}
.movie_chart > div > div > div .infor h3 span.all {background-position: -87px -125px;}
.movie_chart > div > div > div .infor h3 span.a12 {background-position: -58px -125px;}
.movie_chart > div > div > div .infor h3 span.a15 {background-position: 0px -125px;}
.movie_chart > div > div > div .infor h3 span.a19 {background-position: -29px -125px;}
.movie_chart > div > div > div .infor .infor_btn {overflow: hidden;}
.movie_chart > div > div > div .infor .infor_btn a {float: left; width: 49%; margin-right: 2%; text-align: center; background: #f2f2f2; font-size: 18px; padding: 15px 0; box-sizing: border-box;}
.movie_chart > div > div > div .infor .infor_btn a:last-child {margin-right: 0;}
/* 이벤트 */
.event {overflow: hidden; padding: 100px;}
.event img {display: block;}
.event h2 {font-size: 30px;}
.event .event_left {float: left; width: 66%; margin-right: 2%; }
.event .event_left .event_box1 {float: left; width: 50%;}
.event .event_left .event_box2 {float: left; width: 50%;}
.event .event_right {float: left; width: 32%;}
/* 오프닝 */
.opening {padding: 100px 0; text-align: center; color: #bb9b51; }
.opening h2 {}
.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; border: 1px solid #3e4b44; position: relative; padding: 35px 60px; background: rgba(0,0,0,0.5);}
.opening .open_box > div h3 {color: #fff; border: 1px solid #6e3abb; font-size: 19px; position: absolute; top: -10%; left: 90px; background: #551e9b; padding: 10px 20px; font-weight: 300;}
.opening .open_box > div p {font-size: 24px; color: #fff; font-weight: 700; text-align: center; }
.opening .open_box > div em {display: block; font-weight: bold;}
.opening .open_box > div strong {display: block; }
/* 새로운 영화 */
.new {padding: 100px 0; position: relative;}
.new h2 {font-size: 30px; font-weight: 500; margin-bottom: 20px;}
.new .new_left {position: relative; height: 500px; margin-right: 423px; background: #ccc url(../img/new01.jpg) center center; background-size: cover; }
.new .new_left .play {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px;}
.new .new_left .play .st0 {fill: #fff; opacity: 0.3;}
.new .new_left .play .st1 {fill: #fff;}
.new .new_right {width: 400px; height: 500px; background: #f0f0f0; position: absolute; right: 0; top: 165px; box-sizing: border-box; padding: 34px; }
.new .new_right .title {font-size: 28px; color: #000; }
.new .new_right .release {font-size: 12px; color: #333;}
.new .new_right .star {padding: 13px 0;}
.new .new_right .star strong {font-size: 15px; padding-left: 5px;}
.new .new_right .star span { display: inline-block; width: 20px; height: 20px; vertical-align: -3px;}
.new .new_right .star .star1 {background-position: -393px 0;}
.new .new_right .star .star2 {background-position: -412px 0;}
.new .new_right .star .star0 {background-position: -374px 0;}
.new .new_right .summary {font-size: 14px; }
.new .new_right .genre {padding-bottom: 3px;}
.new .new_right .age {padding-bottom: 10px;}
.new .new_right .desc {height: 108px; overflow: hidden;}
.new .new_right .select {overflow: hidden;}
.new .new_right .select .s1 {float: left; width: 49%; margin-right: 2%; background: #000;}
.new .new_right .select .s2 {float: left; width: 49%; background: #000;}
.new .new_right .select .s3 {}
/* 미디어쿼리 */
@media (max-width: 1290px){
.container {width: 100%;}
.header .nav ul li {width: 93px;}
.header .nav ul li a {font-size: 15px; padding: 17px 10px}
.header h1 em {padding: 11px 8px 5px 0;}
.header h1 strong {top: 19px;}
.swiper-button-prev, .swiper-button-next {display: none;}
}
@media (max-width: 1024px){
#mNav {display: block;}
.nav {display: none;}
.row {padding: 0 24px;}
.header h1 {float: none; text-align: center;}
.header h1 strong {left: 24px;}
.banner_menu .bm_left ul {display: none;}
.banner_menu .bm_right ul:first-child {display: none;}
}
@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 .desc {font-size: 25px; background: none;}
.opening .open_box {display: none;}
}
@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 0px 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 {padding: 24px; background: #fff;}
.event .row {padding: 24px; }
.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 {}
#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-color: #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: 5px; }
.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;}
}
@media (max-width: 480px){
}
@media (max-width: 320px){
.movie_title li a {margin-right: 9px;}
}
반응형
UP NEXT : 코딩/메가박스
댓글
© 2018 webstoryboy