웹 디자인부터 코딩까지 이루어지는 수업입니다.
메가박스 사이트를 포토샵을 이용하여
디자인을 하고 반응형 사이트를 만드는 강의입니다.
디자인을 원하지 않으면 메가박스 코딩부터 보셔도 무관합니다.
사용프로그램
Adobe PhotoshopCC 2018 GO
brackets GO
github GO desktop.github GO
웹 퍼블리셔가 되기 위한 튜토리얼 순서
1. 웹 표준 사이트 만들기(2019) GO
2. 반응형 사이트 만들기(2019) GO
3. 메가박스 사이트 만들기(2019) - 디자인 GO
4. 메가박스 사이트 만들기(2019) - 코딩 GO
...추후 제공
도움이 되셨다면 구독과 좋아요!! click
모르거나 궁금한 사항은 언제든지 댓글로 부탁드립니다.
댓글은 영상을 제작하는데 많은 힘이 됩니다.
다 보셨으면. 꼭! 댓글 부탁드립니다.
참고 자료
닷홈 go
구글 폰트 go
swiper API go
YouTube iframe API go
소스 다운로드 : megabox2019
PSD 파일 다운 받기 : www.dropbox.com
인스타그램 보기 : instagram.com/webstoryboy
포폴 만들기 스터디 모임 : https://cafe.naver.com/crossbrowsing
<!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/reset21.css">
<link rel="stylesheet" href="assets/css/style21.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:100,300,400,500,700,900&subset=korean" 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>
<!-- 스킵 메뉴 -->
<div id="skip">
<a rel="bookmark" href="#movie">최신 영화 소식</a>
<a rel="bookmark" href="#event">새로운 이벤트</a>
<a rel="bookmark" href="#new">새로운 영화</a>
</div>
<!-- //스킵 메뉴 -->
<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 class="swiper-button-stop">정지</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_cont1 swiper-wrapper">
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster01.jpg" srcset="assets/img/poster01@2.jpg 2x" alt="침묵">
</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="침묵">
</figure>
<div class="rank"><strong>2</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 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="침묵">
</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="침묵">
</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="침묵">
</figure>
<div class="rank"><strong>5</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="침묵">
</figure>
<div class="rank"><strong>6</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="침묵">
</figure>
<div class="rank"><strong>7</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/poster08.jpg" srcset="assets/img/poster08@2.jpg 2x" alt="침묵">
</figure>
<div class="rank"><strong>8</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_cont1-->
<div class="swiper-container2">
<div class="chart_cont2 swiper-wrapper">
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster05.jpg" srcset="assets/img/poster05@2.jpg 2x" alt="침묵">
</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="침묵">
</figure>
<div class="rank"><strong>2</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 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="침묵">
</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="침묵">
</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/poster08.jpg" srcset="assets/img/poster08@2.jpg 2x" alt="침묵">
</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/poster08.jpg" srcset="assets/img/poster08@2.jpg 2x" alt="침묵">
</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_cont2-->
<div class="swiper-container2">
<div class="chart_cont3 swiper-wrapper">
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster06.jpg" srcset="assets/img/poster06@2.jpg 2x" alt="침묵">
</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="침묵">
</figure>
<div class="rank"><strong>2</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 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="침묵">
</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="침묵">
</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/poster04.jpg" srcset="assets/img/poster04@2.jpg 2x" alt="침묵">
</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/poster04.jpg" srcset="assets/img/poster04@2.jpg 2x" alt="침묵">
</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_cont3-->
<div class="swiper-container2">
<div class="chart_cont4 swiper-wrapper">
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster05.jpg" srcset="assets/img/poster05@2.jpg 2x" alt="침묵">
</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/poster10.jpg" srcset="assets/img/poster10@2.jpg 2x" alt="침묵">
</figure>
<div class="rank"><strong>2</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 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="침묵">
</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="침묵">
</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/poster08.jpg" srcset="assets/img/poster08@2.jpg 2x" alt="침묵">
</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/poster08.jpg" srcset="assets/img/poster08@2.jpg 2x" alt="침묵">
</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_cont4-->
</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" id="showTrailer" data-youtube="F1239ZePXfM">
<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>
<div class="btn">
<a href="#" class="white">좌석확인</a>
<a href="#" class="purple">예매하기</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- //new -->
<section id="help">
<div class="container">
<div class="row">
<div class="help clearfix">
<article class="help_box1">
<h3>공지사항</h3>
<div class="notice">
<ul>
<li class="active"><a href="#">전체 공지</a>
<ul>
<li>
<dl>
<dt><strong class="bar">전체</strong> <em>2019.05.28</em></dt>
<dd><a href="#">[무대인사] 터미네이터6 시즌 발표 및 영상 제작 10주년 기념 라이브 쇼</a></dd>
</dl>
</li>
<li>
<dl>
<dt><strong class="bar">전체</strong> <em>2019.05.24</em></dt>
<dd><a href="#">[무대인사] 터미네이터6 시즌 발표 및 영상 제작 10주년 기념 라이브 쇼</a></dd>
</dl>
</li>
<li>
<dl>
<dt><strong class="bar">전체</strong> <em>2019.05.28</em></dt>
<dd><a href="#">[무대인사] 터미네이터6 시즌 발표 및 영상 제작 10주년 기념 라이브 쇼</a></dd>
</dl>
</li>
<li>
<dl>
<dt><strong class="bar">전체</strong> <em>2019.05.28</em></dt>
<dd><a href="#">[무대인사] 터미네이터6 시즌 발표 및 영상 제작 10주년 기념 라이브 쇼</a></dd>
</dl>
</li>
</ul>
</li>
<li><a href="#">영화관 공지</a>
<ul>
<li>
<dl>
<dt><strong class="bar">안양</strong> <em>2019.05.28</em></dt>
<dd><a href="#">[영화인사] 터미네이터6 시즌 발표 및 영상 제작 10주년 기념 라이브 쇼</a></dd>
</dl>
</li>
<li>
<dl>
<dt><strong class="bar">인덕원</strong> <em>2019.05.24</em></dt>
<dd><a href="#">[영화인사] 터미네이터6 시즌 발표 및 영상 제작 10주년 기념 라이브 쇼</a></dd>
</dl>
</li>
<li>
<dl>
<dt><strong class="bar">서울</strong> <em>2019.05.28</em></dt>
<dd><a href="#">[영화인사] 터미네이터6 시즌 발표 및 영상 제작 10주년 기념 라이브 쇼</a></dd>
</dl>
</li>
<li>
<dl>
<dt><strong class="bar">전체</strong> <em>2019.05.28</em></dt>
<dd><a href="#">[영화인사] 터미네이터6 시즌 발표 및 영상 제작 10주년 기념 라이브 쇼</a></dd>
</dl>
</li>
</ul>
</li>
</ul>
</div>
</article>
<article class="help_box2">
<h3>메가박스 할인카드</h3>
<div class="card">
<ul>
<li>
<a href="#">
<span><img src="assets/img/card01.jpg" srcset="assets/img/card01@2.jpg 2x" alt="card01"></span>
<strong>T멤버십 일반</strong>
<em>영화 2,000원 현장 즉시 할인(1일 5매)</em>
</a>
</li>
<li>
<a href="#">
<span><img src="assets/img/card02.jpg" srcset="assets/img/card02@2.jpg 2x" alt="card01"></span>
<strong>T멤버십 일반</strong>
<em>영화 2,000원 현장 즉시 할인(1일 5매)</em>
</a>
</li>
<li>
<a href="#">
<span><img src="assets/img/card03.jpg" srcset="assets/img/card03@2.jpg 2x" alt="card01"></span>
<strong>T멤버십 일반</strong>
<em>영화 2,000원 현장 즉시 할인(1일 5매)</em>
</a>
</li>
</ul>
</div>
</article>
<article class="help_box3">
<h3>고객센터</h3>
<div class="service">
<ul>
<li>
<a href="#">
<span class="img_svg">
<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">
<g>
<polygon style="fill:none;" points="86.9,57.4 98.1,48.3 97.9,48.2 86.9,48.2"/>
<polygon style="fill:none;" points="22.5,48.2 21.9,48.6 32.9,57.6 32.9,48.2"/>
<polygon style="fill:#FFFFFF;" points="97.9,48.2 86.9,42 86.9,48.2"/>
<polygon style="fill:#FFFFFF;" points="32.9,42.4 22.5,48.2 32.9,48.2"/>
<path style="fill:#FFFFFF;" d="M83.9,23c0-0.7-0.6-1.3-1.3-1.3H37.2c-0.7,0-1.3,0.6-1.3,1.3v37L49.2,71c3.2-0.9,6.7-1.4,10.3-1.4
c3.5,0,7,0.5,10.5,1.5l13.9-11.2V23z M52,40.5c0-0.8,0.7-1.5,1.5-1.5h24c0.8,0,1.5,0.7,1.5,1.5S78.3,42,77.5,42h-24
C52.7,42,52,41.3,52,40.5z M41.5,31c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5h19c0.8,0,1.5,0.7,1.5,1.5S61.3,31,60.5,31H41.5z
M73.5,52h-32c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5h32c0.8,0,1.5,0.7,1.5,1.5S74.3,52,73.5,52z"/>
<path d="M32.9,42.4v5.8v9.4l3,2.5V23c0-0.7,0.6-1.3,1.3-1.3h45.3c0.7,0,1.3,0.6,1.3,1.3v36.8l3-2.4v-9.2V42v-3.4V23
c0-2.4-1.9-4.3-4.3-4.3H37.2c-2.4,0-4.3,1.9-4.3,4.3v15.9V42.4z"/>
<path style="fill:#FFFFFF;" d="M73.4,72.1c6,2.3,11.8,6,17.2,11.1c3.8,3.6,6.7,7.1,8.5,9.7V51.4L73.4,72.1z"/>
<path style="fill:#FFFFFF;" d="M20.6,51.4v41.3c4-5.7,12.6-16,25.2-20.7L20.6,51.4z"/>
<path style="fill:#755CA7;" d="M101.6,47.1l0.1-0.2l-14.9-8.4V42l11.1,6.2l0.2,0.1l-11.3,9.1l-3,2.4L70,71c-3.4-1-6.9-1.5-10.5-1.5
c-3.7,0-7.1,0.5-10.3,1.4L35.9,60l-3-2.5l-11-9l0.6-0.3l10.4-5.8v-3.4L19,46.7c-0.2,0-0.4,0-0.6,0.1c-0.5,0.2-0.9,0.8-0.9,1.4v49.3
c0,0.8,0.7,1.5,1.5,1.5h0.2h81.1h0.2c0.8,0,1.5-0.7,1.5-1.5V48.2C102.1,47.8,102,47.4,101.6,47.1z M99.1,92.9
c-1.9-2.6-4.7-6.1-8.5-9.7c-5.4-5.1-11.2-8.8-17.2-11.1l25.8-20.8V92.9z M97.7,96H22c4.2-6.2,17.5-23.5,37.5-23.5
C79.6,72.5,93.3,89.7,97.7,96z M20.6,92.7V51.4L45.8,72C33.2,76.8,24.6,87,20.6,92.7z"/>
<path style="fill:#FFFFFF;" d="M59.5,72.5c-20,0-33.4,17.2-37.5,23.5h75.7C93.3,89.7,79.6,72.5,59.5,72.5z"/>
<path d="M62,29.5c0-0.8-0.7-1.5-1.5-1.5h-19c-0.8,0-1.5,0.7-1.5,1.5s0.7,1.5,1.5,1.5h19C61.3,31,62,30.3,62,29.5z"/>
<path d="M77.5,42c0.8,0,1.5-0.7,1.5-1.5S78.3,39,77.5,39h-24c-0.8,0-1.5,0.7-1.5,1.5s0.7,1.5,1.5,1.5H77.5z"/>
<path d="M73.5,49h-32c-0.8,0-1.5,0.7-1.5,1.5s0.7,1.5,1.5,1.5h32c0.8,0,1.5-0.7,1.5-1.5S74.3,49,73.5,49z"/>
</g>
</svg>
</span>
<strong>1:1 문의</strong>
</a>
</li>
<li>
<a href="#">
<span class="img_svg">
<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">
<g>
<polygon style="fill:none;" points="199.9,54.4 211.1,45.3 210.9,45.2 199.9,45.2 "/>
<polygon style="fill:none;" points="135.5,45.2 134.9,45.6 145.9,54.6 145.9,45.2 "/>
<polygon style="fill:#FFFFFF;" points="210.9,45.2 199.9,39 199.9,45.2 "/>
<polygon style="fill:#FFFFFF;" points="145.9,39.4 135.5,45.2 145.9,45.2 "/>
<path style="fill:#FFFFFF;" d="M196.9,20c0-0.7-0.6-1.3-1.3-1.3h-45.3c-0.7,0-1.3,0.6-1.3,1.3v37L162.2,68c3.2-0.9,6.7-1.4,10.3-1.4
c3.5,0,7,0.5,10.5,1.5l13.9-11.2V20z M165,37.5c0-0.8,0.7-1.5,1.5-1.5h24c0.8,0,1.5,0.7,1.5,1.5s-0.7,1.5-1.5,1.5h-24
C165.7,39,165,38.3,165,37.5z M154.5,28c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5h19c0.8,0,1.5,0.7,1.5,1.5s-0.7,1.5-1.5,1.5H154.5z
M186.5,49h-32c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5h32c0.8,0,1.5,0.7,1.5,1.5S187.3,49,186.5,49z"/>
<path d="M145.9,39.4v5.8v9.4l3,2.5V20c0-0.7,0.6-1.3,1.3-1.3h45.3c0.7,0,1.3,0.6,1.3,1.3v36.8l3-2.4v-9.2V39v-3.4V20
c0-2.4-1.9-4.3-4.3-4.3h-45.3c-2.4,0-4.3,1.9-4.3,4.3v15.9V39.4z"/>
<path style="fill:#FFFFFF;" d="M186.4,69.1c6,2.3,11.8,6,17.2,11.1c3.8,3.6,6.7,7.1,8.5,9.7V48.4L186.4,69.1z"/>
<path style="fill:#FFFFFF;" d="M133.6,48.4v41.3c4-5.7,12.6-16,25.2-20.7L133.6,48.4z"/>
<path style="fill:#755CA7;" d="M214.6,44.1l0.1-0.2l-14.9-8.4V39l11.1,6.2l0.2,0.1l-11.3,9.1l-3,2.4L183,68c-3.4-1-6.9-1.5-10.5-1.5
c-3.7,0-7.1,0.5-10.3,1.4L148.9,57l-3-2.5l-11-9l0.6-0.3l10.4-5.8v-3.4L132,43.7c-0.2,0-0.4,0-0.6,0.1c-0.5,0.2-0.9,0.8-0.9,1.4
v49.3c0,0.8,0.7,1.5,1.5,1.5h0.2h81.1h0.2c0.8,0,1.5-0.7,1.5-1.5V45.2C215.1,44.8,215,44.4,214.6,44.1z M212.1,89.9
c-1.9-2.6-4.7-6.1-8.5-9.7c-5.4-5.1-11.2-8.8-17.2-11.1l25.8-20.8V89.9z M210.7,93H135c4.2-6.2,17.5-23.5,37.5-23.5
C192.6,69.5,206.3,86.7,210.7,93z M133.6,89.7V48.4L158.8,69C146.2,73.8,137.6,84,133.6,89.7z"/>
<path style="fill:#FFFFFF;" d="M172.5,69.5c-20,0-33.4,17.2-37.5,23.5h75.7C206.3,86.7,192.6,69.5,172.5,69.5z"/>
<path d="M175,26.5c0-0.8-0.7-1.5-1.5-1.5h-19c-0.8,0-1.5,0.7-1.5,1.5s0.7,1.5,1.5,1.5h19C174.3,28,175,27.3,175,26.5z"/>
<path d="M190.5,39c0.8,0,1.5-0.7,1.5-1.5s-0.7-1.5-1.5-1.5h-24c-0.8,0-1.5,0.7-1.5,1.5s0.7,1.5,1.5,1.5H190.5z"/>
<path d="M186.5,46h-32c-0.8,0-1.5,0.7-1.5,1.5s0.7,1.5,1.5,1.5h32c0.8,0,1.5-0.7,1.5-1.5S187.3,46,186.5,46z"/>
<path style="fill:#FFFFFF;" d="M85.3,65.3c0.8,0.1,1.6-0.2,2.3-0.7c0.6-0.5,1-1.3,1.1-2.1c0.1-0.8-0.2-1.6-0.7-2.3c-0.5-0.6-1.3-1-2.1-1.1
c-0.1,0-0.2,0-0.3,0c-0.7,0-1.4,0.2-1.9,0.7c-0.6,0.5-1,1.3-1.1,2.1c-0.1,0.8,0.2,1.6,0.7,2.3C83.7,64.8,84.5,65.2,85.3,65.3z"/>
<path style="fill:#FFFFFF;" d="M70.5,58.2c0.8,0.1,1.6-0.2,2.3-0.7c1.3-1.1,1.5-3,0.5-4.4c-0.6-0.8-1.5-1.2-2.4-1.2c-0.7,0-1.4,0.2-2,0.7
c-1.3,1.1-1.5,3-0.5,4.4C68.9,57.7,69.6,58.1,70.5,58.2z"/>
<path style="fill:#FFFFFF;" d="M44.4,69.9c4.7-0.6,9,2.7,9.6,7.4c0,0.3,0.1,0.6,0.1,1h11.4c0.1-4.2,3.2-7.8,7.4-8.3c4.7-0.6,9,2.7,9.6,7.4
c0.3,2.4-0.5,4.8-1.9,6.5l11.9,12.7c2.7,1.9,6.6,2.1,9.6,0.5c2.5-1.3,4-3.5,4-6.1c0-1-0.7-3.8-1.1-5.1c-0.2-0.9-0.4-1.3-0.4-1.6
l-8.1-29.9c-1.5-6.2-6.3-10.4-11.9-10.4h-49c-5.6,0-10.1,5.4-11.9,10.4l-9.2,32.1c-0.3,1.1-0.5,2.2-0.4,3.3c0,0.5,0,0.9,0,1.1
c0.3,2.7,1.9,4.9,4.3,6.1c2.6,1.3,5.6,1.2,8.1-0.2c0.4-0.2,0.8-0.5,1.2-0.8l11.8-11.7c-1.2-1.3-2.1-2.9-2.3-4.8
C36.5,74.7,39.8,70.5,44.4,69.9z M79,61.5c0.2-1.8,1-3.3,2.4-4.4c1.4-1.1,3.1-1.6,4.8-1.4c1.8,0.2,3.3,1,4.4,2.4s1.6,3.1,1.4,4.8
c-0.2,1.8-1,3.3-2.4,4.4c-1.2,1-2.6,1.5-4.1,1.5c-0.2,0-0.5,0-0.7,0c-1.8-0.2-3.3-1-4.4-2.4S78.9,63.2,79,61.5z M66.6,50
c2.8-2.3,7-1.9,9.3,1c2.3,2.8,1.9,7-1,9.3c-1.2,1-2.6,1.5-4.1,1.5c-0.2,0-0.5,0-0.7,0c-1.8-0.2-3.3-1-4.4-2.4
C63.4,56.4,63.8,52.3,66.6,50z M31.4,59.9c0-1,0.8-1.8,1.8-1.8h5.4v-5.4c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8v5.4h5.4
c1,0,1.8,0.8,1.8,1.8s-0.8,1.8-1.8,1.8H42V67c0,1-0.8,1.8-1.8,1.8S38.5,68,38.5,67v-5.4h-5.4C32.2,61.7,31.4,60.9,31.4,59.9z"/>
<path style="fill:#000000;" d="M108.3,84.9c-0.1-0.5-0.3-1-0.3-1.2l-8.2-30.4c-1.9-7.8-8-13-15.3-13H61.8c0-0.1,0-0.1,0-0.2V20.2
c0-1-0.8-1.8-1.8-1.8s-1.8,0.8-1.8,1.8v19.9c0,0.1,0,0.1,0,0.2H35.5c-7.4,0-13,6.4-15.2,12.8L11,85.4c-0.4,1.4-0.6,2.9-0.6,4.4
c0,1,0,1.3,0.1,1.4c0.5,3.9,2.7,7.1,6.2,8.8c3.6,1.8,7.9,1.7,11.4-0.3c0.6-0.3,1.2-0.7,1.7-1.2l12.5-12.3c-1.1-0.5-2.1-1.1-3-2
L27.5,95.9c-0.4,0.3-0.8,0.6-1.2,0.8c-2.5,1.4-5.5,1.5-8.1,0.2c-2.4-1.2-4-3.4-4.3-6.1c0-0.2,0-0.6,0-1.1c0-1.1,0.1-2.3,0.4-3.3
l9.2-32.1c1.8-5,6.3-10.4,11.9-10.4h49c5.6,0,10.4,4.1,11.9,10.4l8.1,29.9c0,0.3,0.2,0.7,0.4,1.6c0.4,1.3,1.1,4.1,1.1,5.1
c0,2.6-1.5,4.8-4,6.1c-3.1,1.6-6.9,1.3-9.6-0.5L80.6,83.8c-0.7,0.9-1.7,1.6-2.8,2.2L90,99l0.3,0.2c2.2,1.6,4.8,2.3,7.4,2.3
c2,0,4.1-0.5,6-1.4c3.7-1.9,5.9-5.3,5.9-9.3C109.5,89.5,109,87.3,108.3,84.9z"/>
<path style="fill:#000000;" d="M65.5,79.4c-0.1-0.4-0.1-0.8-0.1-1.2H54.1c0,1.2-0.2,2.4-0.7,3.5h12.8C65.9,81,65.6,80.2,65.5,79.4z"/>
<path style="fill:#FFFFFF;" d="M50.5,77.7c-0.3-2.5-2.5-4.4-5-4.4c-0.2,0-0.4,0-0.6,0c-2.8,0.4-4.7,2.9-4.4,5.7c0.4,2.8,2.9,4.7,5.7,4.4
C48.9,83,50.9,80.4,50.5,77.7z"/>
<path style="fill:#755CA7;" d="M54.1,78.2c0-0.3,0-0.6-0.1-1c-0.6-4.7-4.9-8-9.6-7.4c-4.7,0.6-8,4.9-7.4,9.6c0.2,1.9,1.1,3.5,2.3,4.8
c0.8,0.9,1.8,1.5,3,2c1,0.4,2.1,0.6,3.2,0.6c0.4,0,0.7,0,1.1-0.1c3.1-0.4,5.6-2.4,6.8-5.1C53.8,80.6,54.1,79.4,54.1,78.2z M40.5,79
c-0.4-2.8,1.6-5.3,4.4-5.7c0.2,0,0.4,0,0.6,0c2.5,0,4.7,1.9,5,4.4c0.4,2.8-1.6,5.3-4.4,5.7C43.4,83.7,40.9,81.7,40.5,79z"/>
<path style="fill:#FFFFFF;" d="M74.7,83.3c2.8-0.4,4.7-2.9,4.4-5.7c-0.3-2.5-2.5-4.4-5-4.4c-0.2,0-0.4,0-0.6,0c-2.8,0.4-4.7,2.9-4.4,5.7
C69.4,81.7,71.9,83.7,74.7,83.3z"/>
<path style="fill:#755CA7;" d="M80.6,83.8c1.5-1.8,2.2-4.1,1.9-6.5c-0.6-4.7-4.9-8-9.6-7.4c-4.3,0.5-7.4,4.2-7.4,8.3c0,0.4,0,0.8,0.1,1.2
c0.1,0.8,0.3,1.6,0.6,2.3c1.3,3.1,4.4,5.2,7.9,5.2c0.4,0,0.7,0,1.1-0.1c1-0.1,1.9-0.4,2.7-0.8C78.9,85.4,79.8,84.7,80.6,83.8z
M69,79c-0.4-2.8,1.6-5.3,4.4-5.7c0.2,0,0.4,0,0.6,0c2.5,0,4.7,1.9,5,4.4c0.4,2.8-1.6,5.3-4.4,5.7C71.9,83.7,69.4,81.7,69,79z"/>
<path style="fill:#755CA7;" d="M38.5,67c0,1,0.8,1.8,1.8,1.8S42,68,42,67v-5.4h5.4c1,0,1.8-0.8,1.8-1.8s-0.8-1.8-1.8-1.8H42v-5.4
c0-1-0.8-1.8-1.8-1.8s-1.8,0.8-1.8,1.8v5.4h-5.4c-1,0-1.8,0.8-1.8,1.8s0.8,1.8,1.8,1.8h5.4V67z"/>
<path style="fill:#755CA7;" d="M70.1,61.7c0.2,0,0.5,0,0.7,0c1.5,0,3-0.5,4.1-1.5c2.8-2.3,3.3-6.5,1-9.3c-2.3-2.8-6.5-3.3-9.3-1
c-2.8,2.3-3.3,6.5-1,9.3C66.8,60.6,68.3,61.5,70.1,61.7z M68.8,52.7c0.6-0.5,1.3-0.7,2-0.7c0.9,0,1.8,0.4,2.4,1.2
c1.1,1.3,0.9,3.3-0.5,4.4c-0.6,0.5-1.4,0.8-2.3,0.7c-0.8-0.1-1.6-0.5-2.1-1.1C67.3,55.7,67.5,53.8,68.8,52.7z"/>
<path style="fill:#755CA7;" d="M84.9,68.8c0.2,0,0.5,0,0.7,0c1.5,0,3-0.5,4.1-1.5c1.4-1.1,2.2-2.7,2.4-4.4c0.2-1.8-0.3-3.5-1.4-4.8
s-2.7-2.2-4.4-2.4c-1.7-0.2-3.5,0.3-4.8,1.4c-1.4,1.1-2.2,2.7-2.4,4.4c-0.2,1.8,0.3,3.5,1.4,4.8S83.2,68.6,84.9,68.8z M82.5,61.9
c0.1-0.8,0.5-1.6,1.1-2.1c0.6-0.5,1.2-0.7,1.9-0.7c0.1,0,0.2,0,0.3,0c0.8,0.1,1.6,0.5,2.1,1.1c0.5,0.6,0.8,1.5,0.7,2.3
c-0.1,0.8-0.5,1.6-1.1,2.1c-0.6,0.5-1.5,0.8-2.3,0.7c-0.8-0.1-1.6-0.5-2.1-1.1C82.7,63.5,82.4,62.7,82.5,61.9z"/>
</g>
</svg>
</span>
<strong>단체관람</strong>
</a>
</li>
<li>
<a href="#">
<span class="img_svg">
<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">
<g>
<polygon style="fill:none;" points="199.9,54.4 211.1,45.3 210.9,45.2 199.9,45.2 "/>
<polygon style="fill:none;" points="135.5,45.2 134.9,45.6 145.9,54.6 145.9,45.2 "/>
<polygon style="fill:#FFFFFF;" points="210.9,45.2 199.9,39 199.9,45.2 "/>
<polygon style="fill:#FFFFFF;" points="145.9,39.4 135.5,45.2 145.9,45.2 "/>
<path style="fill:#FFFFFF;" d="M196.9,20c0-0.7-0.6-1.3-1.3-1.3h-45.3c-0.7,0-1.3,0.6-1.3,1.3v37L162.2,68c3.2-0.9,6.7-1.4,10.3-1.4
c3.5,0,7,0.5,10.5,1.5l13.9-11.2V20z M165,37.5c0-0.8,0.7-1.5,1.5-1.5h24c0.8,0,1.5,0.7,1.5,1.5s-0.7,1.5-1.5,1.5h-24
C165.7,39,165,38.3,165,37.5z M154.5,28c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5h19c0.8,0,1.5,0.7,1.5,1.5s-0.7,1.5-1.5,1.5H154.5z
M186.5,49h-32c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5h32c0.8,0,1.5,0.7,1.5,1.5S187.3,49,186.5,49z"/>
<path d="M145.9,39.4v5.8v9.4l3,2.5V20c0-0.7,0.6-1.3,1.3-1.3h45.3c0.7,0,1.3,0.6,1.3,1.3v36.8l3-2.4v-9.2V39v-3.4V20
c0-2.4-1.9-4.3-4.3-4.3h-45.3c-2.4,0-4.3,1.9-4.3,4.3v15.9V39.4z"/>
<path style="fill:#FFFFFF;" d="M186.4,69.1c6,2.3,11.8,6,17.2,11.1c3.8,3.6,6.7,7.1,8.5,9.7V48.4L186.4,69.1z"/>
<path style="fill:#FFFFFF;" d="M133.6,48.4v41.3c4-5.7,12.6-16,25.2-20.7L133.6,48.4z"/>
<path style="fill:#755CA7;" d="M214.6,44.1l0.1-0.2l-14.9-8.4V39l11.1,6.2l0.2,0.1l-11.3,9.1l-3,2.4L183,68c-3.4-1-6.9-1.5-10.5-1.5
c-3.7,0-7.1,0.5-10.3,1.4L148.9,57l-3-2.5l-11-9l0.6-0.3l10.4-5.8v-3.4L132,43.7c-0.2,0-0.4,0-0.6,0.1c-0.5,0.2-0.9,0.8-0.9,1.4
v49.3c0,0.8,0.7,1.5,1.5,1.5h0.2h81.1h0.2c0.8,0,1.5-0.7,1.5-1.5V45.2C215.1,44.8,215,44.4,214.6,44.1z M212.1,89.9
c-1.9-2.6-4.7-6.1-8.5-9.7c-5.4-5.1-11.2-8.8-17.2-11.1l25.8-20.8V89.9z M210.7,93H135c4.2-6.2,17.5-23.5,37.5-23.5
C192.6,69.5,206.3,86.7,210.7,93z M133.6,89.7V48.4L158.8,69C146.2,73.8,137.6,84,133.6,89.7z"/>
<path style="fill:#FFFFFF;" d="M172.5,69.5c-20,0-33.4,17.2-37.5,23.5h75.7C206.3,86.7,192.6,69.5,172.5,69.5z"/>
<path d="M175,26.5c0-0.8-0.7-1.5-1.5-1.5h-19c-0.8,0-1.5,0.7-1.5,1.5s0.7,1.5,1.5,1.5h19C174.3,28,175,27.3,175,26.5z"/>
<path d="M190.5,39c0.8,0,1.5-0.7,1.5-1.5s-0.7-1.5-1.5-1.5h-24c-0.8,0-1.5,0.7-1.5,1.5s0.7,1.5,1.5,1.5H190.5z"/>
<path d="M186.5,46h-32c-0.8,0-1.5,0.7-1.5,1.5s0.7,1.5,1.5,1.5h32c0.8,0,1.5-0.7,1.5-1.5S187.3,46,186.5,46z"/>
<path style="fill:#FFFFFF;" d="M261.3,167.3c0.8,0.1,1.6-0.2,2.3-0.7c0.6-0.5,1-1.3,1.1-2.1c0.1-0.8-0.2-1.6-0.7-2.3c-0.5-0.6-1.3-1-2.1-1.1
c-0.1,0-0.2,0-0.3,0c-0.7,0-1.4,0.2-1.9,0.7c-0.6,0.5-1,1.3-1.1,2.1c-0.1,0.8,0.2,1.6,0.7,2.3C259.7,166.8,260.5,167.2,261.3,167.3
z"/>
<path style="fill:#FFFFFF;" d="M246.5,160.2c0.8,0.1,1.6-0.2,2.3-0.7c1.3-1.1,1.5-3,0.5-4.4c-0.6-0.8-1.5-1.2-2.4-1.2c-0.7,0-1.4,0.2-2,0.7
c-1.3,1.1-1.5,3-0.5,4.4C244.9,159.7,245.6,160.1,246.5,160.2z"/>
<path style="fill:#FFFFFF;" d="M220.4,171.9c4.7-0.6,9,2.7,9.6,7.4c0,0.3,0.1,0.6,0.1,1h11.4c0.1-4.2,3.2-7.8,7.4-8.3c4.7-0.6,9,2.7,9.6,7.4
c0.3,2.4-0.5,4.8-1.9,6.5l11.9,12.7c2.7,1.9,6.6,2.1,9.6,0.5c2.5-1.3,4-3.5,4-6.1c0-1-0.7-3.8-1.1-5.1c-0.2-0.9-0.4-1.3-0.4-1.6
l-8.1-29.9c-1.5-6.2-6.3-10.4-11.9-10.4h-49c-5.6,0-10.1,5.4-11.9,10.4l-9.2,32.1c-0.3,1.1-0.5,2.2-0.4,3.3c0,0.5,0,0.9,0,1.1
c0.3,2.7,1.9,4.9,4.3,6.1c2.6,1.3,5.6,1.2,8.1-0.2c0.4-0.2,0.8-0.5,1.2-0.8l11.8-11.7c-1.2-1.3-2.1-2.9-2.3-4.8
C212.5,176.7,215.8,172.5,220.4,171.9z M255,163.5c0.2-1.8,1-3.3,2.4-4.4c1.4-1.1,3.1-1.6,4.8-1.4c1.8,0.2,3.3,1,4.4,2.4
s1.6,3.1,1.4,4.8c-0.2,1.8-1,3.3-2.4,4.4c-1.2,1-2.6,1.5-4.1,1.5c-0.2,0-0.5,0-0.7,0c-1.8-0.2-3.3-1-4.4-2.4S254.9,165.2,255,163.5
z M242.6,152c2.8-2.3,7-1.9,9.3,1c2.3,2.8,1.9,7-1,9.3c-1.2,1-2.6,1.5-4.1,1.5c-0.2,0-0.5,0-0.7,0c-1.8-0.2-3.3-1-4.4-2.4
C239.4,158.4,239.8,154.3,242.6,152z M207.4,161.9c0-1,0.8-1.8,1.8-1.8h5.4v-5.4c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8v5.4h5.4
c1,0,1.8,0.8,1.8,1.8s-0.8,1.8-1.8,1.8H218v5.4c0,1-0.8,1.8-1.8,1.8s-1.8-0.8-1.8-1.8v-5.4h-5.4
C208.2,163.7,207.4,162.9,207.4,161.9z"/>
<path class="st3" d="M284.3,186.9c-0.1-0.5-0.3-1-0.3-1.2l-8.2-30.4c-1.9-7.8-8-13-15.3-13h-22.8c0-0.1,0-0.1,0-0.2v-19.9
c0-1-0.8-1.8-1.8-1.8s-1.8,0.8-1.8,1.8v19.9c0,0.1,0,0.1,0,0.2h-22.8c-7.4,0-13,6.4-15.2,12.8l-9.2,32.3c-0.4,1.4-0.6,2.9-0.6,4.4
c0,1,0,1.3,0.1,1.4c0.5,3.9,2.7,7.1,6.2,8.8c3.6,1.8,7.9,1.7,11.4-0.3c0.6-0.3,1.2-0.7,1.7-1.2l12.5-12.3c-1.1-0.5-2.1-1.1-3-2
l-11.8,11.7c-0.4,0.3-0.8,0.6-1.2,0.8c-2.5,1.4-5.5,1.5-8.1,0.2c-2.4-1.2-4-3.4-4.3-6.1c0-0.2,0-0.6,0-1.1c0-1.1,0.1-2.3,0.4-3.3
l9.2-32.1c1.8-5,6.3-10.4,11.9-10.4h49c5.6,0,10.4,4.1,11.9,10.4l8.1,29.9c0,0.3,0.2,0.7,0.4,1.6c0.4,1.3,1.1,4.1,1.1,5.1
c0,2.6-1.5,4.8-4,6.1c-3.1,1.6-6.9,1.3-9.6-0.5l-11.9-12.7c-0.7,0.9-1.7,1.6-2.8,2.2l12.2,13l0.3,0.2c2.2,1.6,4.8,2.3,7.4,2.3
c2,0,4.1-0.5,6-1.4c3.7-1.9,5.9-5.3,5.9-9.3C285.5,191.5,285,189.3,284.3,186.9z"/>
<path style="fill:#000;" d="M241.5,181.4c-0.1-0.4-0.1-0.8-0.1-1.2h-11.4c0,1.2-0.2,2.4-0.7,3.5h12.8C241.9,183,241.6,182.2,241.5,181.4z"
/>
<path style="fill:#FFFFFF;" d="M226.5,179.7c-0.3-2.5-2.5-4.4-5-4.4c-0.2,0-0.4,0-0.6,0c-2.8,0.4-4.7,2.9-4.4,5.7c0.4,2.8,2.9,4.7,5.7,4.4
C224.9,185,226.9,182.4,226.5,179.7z"/>
<path style="fill:#755CA7;" d="M230.1,180.2c0-0.3,0-0.6-0.1-1c-0.6-4.7-4.9-8-9.6-7.4c-4.7,0.6-8,4.9-7.4,9.6c0.2,1.9,1.1,3.5,2.3,4.8
c0.8,0.9,1.8,1.5,3,2c1,0.4,2.1,0.6,3.2,0.6c0.4,0,0.7,0,1.1-0.1c3.1-0.4,5.6-2.4,6.8-5.1C229.8,182.6,230.1,181.4,230.1,180.2z
M216.5,181c-0.4-2.8,1.6-5.3,4.4-5.7c0.2,0,0.4,0,0.6,0c2.5,0,4.7,1.9,5,4.4c0.4,2.8-1.6,5.3-4.4,5.7
C219.4,185.7,216.9,183.7,216.5,181z"/>
<path style="fill:#FFFFFF;" d="M250.7,185.3c2.8-0.4,4.7-2.9,4.4-5.7c-0.3-2.5-2.5-4.4-5-4.4c-0.2,0-0.4,0-0.6,0c-2.8,0.4-4.7,2.9-4.4,5.7
C245.4,183.7,247.9,185.7,250.7,185.3z"/>
<path style="fill:#755CA7;" d="M256.6,185.8c1.5-1.8,2.2-4.1,1.9-6.5c-0.6-4.7-4.9-8-9.6-7.4c-4.3,0.5-7.4,4.2-7.4,8.3c0,0.4,0,0.8,0.1,1.2
c0.1,0.8,0.3,1.6,0.6,2.3c1.3,3.1,4.4,5.2,7.9,5.2c0.4,0,0.7,0,1.1-0.1c1-0.1,1.9-0.4,2.7-0.8C254.9,187.4,255.8,186.7,256.6,185.8
z M245,181c-0.4-2.8,1.6-5.3,4.4-5.7c0.2,0,0.4,0,0.6,0c2.5,0,4.7,1.9,5,4.4c0.4,2.8-1.6,5.3-4.4,5.7
C247.9,185.7,245.4,183.7,245,181z"/>
<path style="fill:#755CA7;" d="M214.5,169c0,1,0.8,1.8,1.8,1.8s1.8-0.8,1.8-1.8v-5.4h5.4c1,0,1.8-0.8,1.8-1.8s-0.8-1.8-1.8-1.8H218v-5.4
c0-1-0.8-1.8-1.8-1.8s-1.8,0.8-1.8,1.8v5.4h-5.4c-1,0-1.8,0.8-1.8,1.8s0.8,1.8,1.8,1.8h5.4V169z"/>
<path style="fill:#755CA7;" d="M246.1,163.7c0.2,0,0.5,0,0.7,0c1.5,0,3-0.5,4.1-1.5c2.8-2.3,3.3-6.5,1-9.3c-2.3-2.8-6.5-3.3-9.3-1
c-2.8,2.3-3.3,6.5-1,9.3C242.8,162.6,244.3,163.5,246.1,163.7z M244.8,154.7c0.6-0.5,1.3-0.7,2-0.7c0.9,0,1.8,0.4,2.4,1.2
c1.1,1.3,0.9,3.3-0.5,4.4c-0.6,0.5-1.4,0.8-2.3,0.7c-0.8-0.1-1.6-0.5-2.1-1.1C243.3,157.7,243.5,155.8,244.8,154.7z"/>
<path style="fill:#755CA7;" d="M260.9,170.8c0.2,0,0.5,0,0.7,0c1.5,0,3-0.5,4.1-1.5c1.4-1.1,2.2-2.7,2.4-4.4c0.2-1.8-0.3-3.5-1.4-4.8
s-2.7-2.2-4.4-2.4c-1.7-0.2-3.5,0.3-4.8,1.4c-1.4,1.1-2.2,2.7-2.4,4.4c-0.2,1.8,0.3,3.5,1.4,4.8S259.2,170.6,260.9,170.8z
M258.5,163.9c0.1-0.8,0.5-1.6,1.1-2.1c0.6-0.5,1.2-0.7,1.9-0.7c0.1,0,0.2,0,0.3,0c0.8,0.1,1.6,0.5,2.1,1.1
c0.5,0.6,0.8,1.5,0.7,2.3c-0.1,0.8-0.5,1.6-1.1,2.1c-0.6,0.5-1.5,0.8-2.3,0.7c-0.8-0.1-1.6-0.5-2.1-1.1
C258.7,165.5,258.4,164.7,258.5,163.9z"/>
<polygon style="fill:none;" points="61.4,35.8 59.4,41.6 63.5,41.6 "/>
<path style="fill:none;" d="M75.9,45c0.5,0,0.9-0.1,1.4-0.3c-0.3-0.2-0.7-0.4-1.1-0.7c-0.4-0.2-0.7-0.4-0.9-0.5C75.1,43.4,75,43.2,75,43
c0-0.2,0.1-0.4,0.2-0.5c0.2-0.1,0.3-0.2,0.5-0.2c0.6,0,1.5,0.5,2.9,1.4c0.4-0.4,0.7-1,0.9-1.6c0.2-0.6,0.3-1.3,0.3-2.1
c0-1-0.2-1.9-0.5-2.6c-0.3-0.7-0.8-1.3-1.4-1.7s-1.3-0.6-2.1-0.6c-0.6,0-1.1,0.1-1.6,0.3c-0.5,0.2-0.9,0.5-1.2,0.9
c-0.3,0.4-0.6,0.9-0.8,1.5s-0.3,1.3-0.3,2.1c0,1.6,0.4,2.8,1.1,3.7C73.8,44.5,74.7,45,75.9,45z"/>
<path style="fill:none;" d="M47,90.3c0-3.3-2.1-5.9-4.7-5.9c-1,0-1.8-0.8-1.8-1.8s0.8-1.8,1.8-1.8H89V29.7c0-1-0.2-1.9-0.5-2.7l-2.3-2.7
c-0.6-0.3-1.2-0.5-1.9-0.5H35.6c1.1,1.6,1.8,3.7,1.8,5.9v0.7v1.1v58.9c0,3.3,2.1,5.9,4.7,5.9S47,93.6,47,90.3z M81.7,69.6H60.3
c-1,0-1.8-0.8-1.8-1.8s0.8-1.8,1.8-1.8h21.5c1,0,1.8,0.8,1.8,1.8S82.7,69.6,81.7,69.6z M69.6,37.1c0.3-0.9,0.7-1.6,1.3-2.3
c0.6-0.6,1.3-1.1,2.1-1.4c0.8-0.3,1.8-0.5,2.8-0.5c1.4,0,2.7,0.3,3.7,0.9c1,0.6,1.8,1.4,2.3,2.5c0.5,1.1,0.8,2.3,0.8,3.8
c0,2.2-0.6,3.9-1.8,5.2c0.4,0.3,0.9,0.5,1.3,0.8s0.8,0.5,1,0.6s0.2,0.4,0.2,0.7c0,0.2-0.1,0.4-0.3,0.6c-0.2,0.2-0.4,0.3-0.7,0.3
c-0.2,0-0.5-0.1-0.8-0.2c-0.3-0.1-0.7-0.3-1.1-0.6c-0.4-0.3-0.9-0.6-1.4-0.9c-0.9,0.5-2,0.7-3.4,0.7c-1.1,0-2-0.2-2.9-0.5
c-0.9-0.3-1.6-0.8-2.1-1.5c-0.6-0.6-1-1.4-1.3-2.3s-0.4-1.9-0.4-2.9C69.1,38.9,69.3,38,69.6,37.1z M59,35.5
c0.1-0.3,0.2-0.6,0.4-0.9c0.1-0.4,0.3-0.7,0.5-0.9c0.2-0.2,0.4-0.4,0.6-0.6c0.3-0.1,0.6-0.2,1-0.2c0.4,0,0.7,0.1,1,0.2
c0.3,0.1,0.5,0.3,0.6,0.6c0.2,0.2,0.3,0.5,0.4,0.8c0.1,0.3,0.2,0.6,0.4,1.1l3.6,8.9c0.3,0.7,0.4,1.2,0.4,1.5c0,0.3-0.1,0.6-0.4,0.9
c-0.3,0.3-0.6,0.4-1,0.4c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.3-0.2-0.4-0.3c-0.1-0.1-0.2-0.3-0.3-0.6c-0.1-0.3-0.2-0.5-0.3-0.7
l-0.7-1.7h-5.6L58,45.4c-0.3,0.7-0.5,1.2-0.7,1.4s-0.5,0.4-0.9,0.4c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.3-0.4-0.6-0.4-0.9
c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.5,0.3-0.8L59,35.5z M45.8,34.8c0-0.4,0.1-0.7,0.2-1s0.3-0.4,0.6-0.6c0.3-0.1,0.6-0.2,1-0.2h6.6
c0.4,0,0.8,0.1,1,0.3s0.3,0.5,0.3,0.8c0,0.3-0.1,0.6-0.3,0.8s-0.5,0.3-1,0.3h-5.5v3.5h4.6c0.4,0,0.7,0.1,1,0.3
c0.2,0.2,0.3,0.4,0.3,0.8c0,0.3-0.1,0.6-0.3,0.8c-0.2,0.2-0.5,0.3-1,0.3h-4.6v4.6c0,0.6-0.1,1-0.4,1.3c-0.3,0.3-0.6,0.4-1,0.4
c-0.4,0-0.8-0.1-1-0.4s-0.4-0.7-0.4-1.3V34.8z M47.4,56.2h17.8c1,0,1.8,0.8,1.8,1.8s-0.8,1.8-1.8,1.8H47.4c-1,0-1.8-0.8-1.8-1.8
S46.4,56.2,47.4,56.2z"/>
<path style="fill:#FFFFFF;" d="M90.8,84.4H48.6c1.1,1.6,1.8,3.7,1.8,5.9c0,0.3,0,0.6,0,0.9c0,0.1,0,0.2,0,0.3c0,0.2,0,0.4-0.1,0.6
c0,0.1,0,0.2-0.1,0.3c0,0.2-0.1,0.4-0.1,0.5c0,0.1-0.1,0.2-0.1,0.3c0,0.2-0.1,0.3-0.2,0.5c0,0.1-0.1,0.2-0.1,0.3
c-0.1,0.2-0.1,0.3-0.2,0.5c0,0.1-0.1,0.2-0.1,0.3c-0.1,0.2-0.2,0.4-0.3,0.6c0,0,0,0.1-0.1,0.1c-0.1,0.2-0.3,0.4-0.4,0.6h42.1
c2.6,0,4.7-2.6,4.7-5.9S93.4,84.4,90.8,84.4z"/>
<path style="fill:#000;" d="M92.5,81.1V29.7c0-5.2-3.7-9.4-8.2-9.4h-55c-4.5,0-8.2,4.2-8.2,9.4v1.8h13v58.9c0,5.2,3.7,9.4,8.2,9.4h48.5
c4.5,0,8.2-4.2,8.2-9.4C99,85.8,96.2,82.1,92.5,81.1z M90.8,96.2H48.6c0.1-0.2,0.3-0.4,0.4-0.6c0,0,0-0.1,0.1-0.1
c0.1-0.2,0.2-0.4,0.3-0.6c0-0.1,0.1-0.2,0.1-0.3c0.1-0.2,0.1-0.3,0.2-0.5c0-0.1,0.1-0.2,0.1-0.3c0.1-0.2,0.1-0.3,0.2-0.5
c0-0.1,0.1-0.2,0.1-0.3c0-0.2,0.1-0.3,0.1-0.5c0-0.1,0-0.2,0.1-0.3c0-0.2,0.1-0.4,0.1-0.6c0-0.1,0-0.2,0-0.3c0-0.3,0-0.6,0-0.9
c0-2.2-0.7-4.3-1.8-5.9h42.1c2.6,0,4.7,2.6,4.7,5.9S93.4,96.2,90.8,96.2z M90.8,82.7L90.8,82.7L90.8,82.7z M90.8,29.7L90.8,29.7
L90.8,29.7z M29.2,23.8c2.1,0,3.9,1.8,4.5,4.2h-9.1C25.3,25.5,27.1,23.8,29.2,23.8z M37.5,90.3V31.4v-1.1v-0.7
c0-2.2-0.7-4.3-1.8-5.9h48.6c0.7,0,1.3,0.2,1.9,0.5c1,0.6,1.8,1.5,2.3,2.7c0.3,0.8,0.5,1.7,0.5,2.7v51.2H42.2c-1,0-1.8,0.8-1.8,1.8
s0.8,1.8,1.8,1.8c2.6,0,4.7,2.6,4.7,5.9s-2.1,5.9-4.7,5.9S37.5,93.6,37.5,90.3z"/>
<path style="fill:#FFFFFF;" d="M86.2,24.3l2.3,2.7C88,25.8,87.2,24.8,86.2,24.3z"/>
<path style="fill:#FFFFFF;" d="M33.8,27.9c-0.6-2.4-2.4-4.2-4.5-4.2s-3.9,1.8-4.5,4.2H33.8z"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;" x1="90.8" y1="82.7" x2="90.8" y2="82.7"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;" x1="90.8" y1="29.7" x2="90.8" y2="29.7"/>
<path style="fill:#755CA7;" d="M47.2,47.2c0.4,0,0.7-0.1,1-0.4c0.3-0.3,0.4-0.7,0.4-1.3v-4.6h4.6c0.4,0,0.7-0.1,1-0.3
c0.2-0.2,0.3-0.4,0.3-0.8c0-0.3-0.1-0.6-0.3-0.8c-0.2-0.2-0.5-0.3-1-0.3h-4.6v-3.5h5.5c0.4,0,0.8-0.1,1-0.3s0.3-0.5,0.3-0.8
c0-0.3-0.1-0.6-0.3-0.8s-0.5-0.3-1-0.3h-6.6c-0.4,0-0.7,0.1-1,0.2c-0.3,0.1-0.4,0.3-0.6,0.6s-0.2,0.6-0.2,1v10.7
c0,0.6,0.1,1,0.4,1.3S46.8,47.2,47.2,47.2z"/>
<path style="fill:#755CA7;" d="M55.1,45.9c0,0.3,0.1,0.6,0.4,0.9c0.3,0.3,0.6,0.4,0.9,0.4c0.4,0,0.7-0.1,0.9-0.4s0.4-0.7,0.7-1.4l0.7-1.8h5.6
l0.7,1.7c0.1,0.2,0.2,0.5,0.3,0.7c0.1,0.3,0.2,0.5,0.3,0.6c0.1,0.1,0.2,0.2,0.4,0.3c0.2,0.1,0.3,0.1,0.6,0.1c0.4,0,0.7-0.1,1-0.4
c0.3-0.3,0.4-0.6,0.4-0.9c0-0.3-0.1-0.8-0.4-1.5l-3.6-8.9c-0.2-0.4-0.3-0.8-0.4-1.1c-0.1-0.3-0.2-0.5-0.4-0.8
c-0.2-0.2-0.4-0.4-0.6-0.6c-0.3-0.1-0.6-0.2-1-0.2c-0.4,0-0.7,0.1-1,0.2c-0.3,0.1-0.5,0.3-0.6,0.6c-0.2,0.2-0.3,0.5-0.5,0.9
c-0.1,0.4-0.3,0.7-0.4,0.9l-3.5,9c-0.1,0.4-0.2,0.6-0.3,0.8C55.1,45.6,55.1,45.7,55.1,45.9z M61.4,35.8l2.1,5.7h-4.1L61.4,35.8z"/>
<path style="fill:#755CA7;" d="M70.8,45.2c0.6,0.6,1.3,1.1,2.1,1.5c0.9,0.3,1.8,0.5,2.9,0.5c1.3,0,2.4-0.2,3.4-0.7c0.5,0.4,0.9,0.7,1.4,0.9
c0.4,0.3,0.8,0.5,1.1,0.6c0.3,0.1,0.6,0.2,0.8,0.2c0.3,0,0.5-0.1,0.7-0.3c0.2-0.2,0.3-0.4,0.3-0.6c0-0.3-0.1-0.5-0.2-0.7
s-0.5-0.4-1-0.6s-0.9-0.5-1.3-0.8c1.2-1.3,1.8-3,1.8-5.2c0-1.4-0.3-2.7-0.8-3.8c-0.5-1.1-1.3-1.9-2.3-2.5c-1-0.6-2.3-0.9-3.7-0.9
c-1.1,0-2,0.2-2.8,0.5c-0.8,0.3-1.5,0.8-2.1,1.4c-0.6,0.6-1,1.4-1.3,2.3c-0.3,0.9-0.5,1.9-0.5,2.9c0,1,0.1,2,0.4,2.9
S70.3,44.6,70.8,45.2z M72.2,37.9c0.2-0.6,0.5-1.1,0.8-1.5c0.3-0.4,0.8-0.7,1.2-0.9c0.5-0.2,1-0.3,1.6-0.3c0.8,0,1.5,0.2,2.1,0.6
s1.1,0.9,1.4,1.7c0.3,0.7,0.5,1.6,0.5,2.6c0,0.8-0.1,1.5-0.3,2.1c-0.2,0.6-0.5,1.1-0.9,1.6c-1.3-1-2.3-1.4-2.9-1.4
c-0.2,0-0.4,0.1-0.5,0.2C75.1,42.6,75,42.8,75,43c0,0.2,0.1,0.4,0.2,0.5c0.2,0.1,0.5,0.3,0.9,0.5c0.4,0.2,0.8,0.4,1.1,0.7
c-0.5,0.2-1,0.3-1.4,0.3c-1.1,0-2.1-0.4-2.8-1.3c-0.7-0.9-1.1-2.1-1.1-3.7C71.9,39.2,72,38.5,72.2,37.9z"/>
<path style="fill:#755CA7;" d="M47.4,59.7h17.8c1,0,1.8-0.8,1.8-1.8s-0.8-1.8-1.8-1.8H47.4c-1,0-1.8,0.8-1.8,1.8S46.4,59.7,47.4,59.7z"/>
<path style="fill:#755CA7;" d="M81.7,66.1H60.3c-1,0-1.8,0.8-1.8,1.8s0.8,1.8,1.8,1.8h21.5c1,0,1.8-0.8,1.8-1.8S82.7,66.1,81.7,66.1z"/>
</g>
</svg>
</span>
<strong>자주묻는 질문</strong>
</a>
</li>
<li>
<a href="#">
<span class="img_svg">
<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">
<style type="text/css">
.st0{fill:none;}
.st1{fill:#FFFFFF;}
.st2{fill:#755CA7;}
.st3{fill:#1D1D1B;}
.st4{fill:#715EA5;}
.st5{fill:none;stroke:#FFFFFF;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;}
.st6{fill:none;stroke:#1D1D1B;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;}
</style>
<g>
<polygon class="st0" points="199.9,54.4 211.1,45.3 210.9,45.2 199.9,45.2 "/>
<polygon class="st0" points="135.5,45.2 134.9,45.6 145.9,54.6 145.9,45.2 "/>
<polygon class="st1" points="210.9,45.2 199.9,39 199.9,45.2 "/>
<polygon class="st1" points="145.9,39.4 135.5,45.2 145.9,45.2 "/>
<path class="st1" d="M196.9,20c0-0.7-0.6-1.3-1.3-1.3h-45.3c-0.7,0-1.3,0.6-1.3,1.3v37L162.2,68c3.2-0.9,6.7-1.4,10.3-1.4
c3.5,0,7,0.5,10.5,1.5l13.9-11.2V20z M165,37.5c0-0.8,0.7-1.5,1.5-1.5h24c0.8,0,1.5,0.7,1.5,1.5s-0.7,1.5-1.5,1.5h-24
C165.7,39,165,38.3,165,37.5z M154.5,28c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5h19c0.8,0,1.5,0.7,1.5,1.5s-0.7,1.5-1.5,1.5H154.5z
M186.5,49h-32c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5h32c0.8,0,1.5,0.7,1.5,1.5S187.3,49,186.5,49z"/>
<path d="M145.9,39.4v5.8v9.4l3,2.5V20c0-0.7,0.6-1.3,1.3-1.3h45.3c0.7,0,1.3,0.6,1.3,1.3v36.8l3-2.4v-9.2V39v-3.4V20
c0-2.4-1.9-4.3-4.3-4.3h-45.3c-2.4,0-4.3,1.9-4.3,4.3v15.9V39.4z"/>
<path class="st1" d="M186.4,69.1c6,2.3,11.8,6,17.2,11.1c3.8,3.6,6.7,7.1,8.5,9.7V48.4L186.4,69.1z"/>
<path class="st1" d="M133.6,48.4v41.3c4-5.7,12.6-16,25.2-20.7L133.6,48.4z"/>
<path class="st2" d="M214.6,44.1l0.1-0.2l-14.9-8.4V39l11.1,6.2l0.2,0.1l-11.3,9.1l-3,2.4L183,68c-3.4-1-6.9-1.5-10.5-1.5
c-3.7,0-7.1,0.5-10.3,1.4L148.9,57l-3-2.5l-11-9l0.6-0.3l10.4-5.8v-3.4L132,43.7c-0.2,0-0.4,0-0.6,0.1c-0.5,0.2-0.9,0.8-0.9,1.4
v49.3c0,0.8,0.7,1.5,1.5,1.5h0.2h81.1h0.2c0.8,0,1.5-0.7,1.5-1.5V45.2C215.1,44.8,215,44.4,214.6,44.1z M212.1,89.9
c-1.9-2.6-4.7-6.1-8.5-9.7c-5.4-5.1-11.2-8.8-17.2-11.1l25.8-20.8V89.9z M210.7,93H135c4.2-6.2,17.5-23.5,37.5-23.5
C192.6,69.5,206.3,86.7,210.7,93z M133.6,89.7V48.4L158.8,69C146.2,73.8,137.6,84,133.6,89.7z"/>
<path class="st1" d="M172.5,69.5c-20,0-33.4,17.2-37.5,23.5h75.7C206.3,86.7,192.6,69.5,172.5,69.5z"/>
<path d="M175,26.5c0-0.8-0.7-1.5-1.5-1.5h-19c-0.8,0-1.5,0.7-1.5,1.5s0.7,1.5,1.5,1.5h19C174.3,28,175,27.3,175,26.5z"/>
<path d="M190.5,39c0.8,0,1.5-0.7,1.5-1.5s-0.7-1.5-1.5-1.5h-24c-0.8,0-1.5,0.7-1.5,1.5s0.7,1.5,1.5,1.5H190.5z"/>
<path d="M186.5,46h-32c-0.8,0-1.5,0.7-1.5,1.5s0.7,1.5,1.5,1.5h32c0.8,0,1.5-0.7,1.5-1.5S187.3,46,186.5,46z"/>
<path class="st1" d="M261.3,167.3c0.8,0.1,1.6-0.2,2.3-0.7c0.6-0.5,1-1.3,1.1-2.1c0.1-0.8-0.2-1.6-0.7-2.3c-0.5-0.6-1.3-1-2.1-1.1
c-0.1,0-0.2,0-0.3,0c-0.7,0-1.4,0.2-1.9,0.7c-0.6,0.5-1,1.3-1.1,2.1c-0.1,0.8,0.2,1.6,0.7,2.3C259.7,166.8,260.5,167.2,261.3,167.3
z"/>
<path class="st1" d="M246.5,160.2c0.8,0.1,1.6-0.2,2.3-0.7c1.3-1.1,1.5-3,0.5-4.4c-0.6-0.8-1.5-1.2-2.4-1.2c-0.7,0-1.4,0.2-2,0.7
c-1.3,1.1-1.5,3-0.5,4.4C244.9,159.7,245.6,160.1,246.5,160.2z"/>
<path class="st1" d="M220.4,171.9c4.7-0.6,9,2.7,9.6,7.4c0,0.3,0.1,0.6,0.1,1h11.4c0.1-4.2,3.2-7.8,7.4-8.3c4.7-0.6,9,2.7,9.6,7.4
c0.3,2.4-0.5,4.8-1.9,6.5l11.9,12.7c2.7,1.9,6.6,2.1,9.6,0.5c2.5-1.3,4-3.5,4-6.1c0-1-0.7-3.8-1.1-5.1c-0.2-0.9-0.4-1.3-0.4-1.6
l-8.1-29.9c-1.5-6.2-6.3-10.4-11.9-10.4h-49c-5.6,0-10.1,5.4-11.9,10.4l-9.2,32.1c-0.3,1.1-0.5,2.2-0.4,3.3c0,0.5,0,0.9,0,1.1
c0.3,2.7,1.9,4.9,4.3,6.1c2.6,1.3,5.6,1.2,8.1-0.2c0.4-0.2,0.8-0.5,1.2-0.8l11.8-11.7c-1.2-1.3-2.1-2.9-2.3-4.8
C212.5,176.7,215.8,172.5,220.4,171.9z M255,163.5c0.2-1.8,1-3.3,2.4-4.4c1.4-1.1,3.1-1.6,4.8-1.4c1.8,0.2,3.3,1,4.4,2.4
s1.6,3.1,1.4,4.8c-0.2,1.8-1,3.3-2.4,4.4c-1.2,1-2.6,1.5-4.1,1.5c-0.2,0-0.5,0-0.7,0c-1.8-0.2-3.3-1-4.4-2.4S254.9,165.2,255,163.5
z M242.6,152c2.8-2.3,7-1.9,9.3,1c2.3,2.8,1.9,7-1,9.3c-1.2,1-2.6,1.5-4.1,1.5c-0.2,0-0.5,0-0.7,0c-1.8-0.2-3.3-1-4.4-2.4
C239.4,158.4,239.8,154.3,242.6,152z M207.4,161.9c0-1,0.8-1.8,1.8-1.8h5.4v-5.4c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8v5.4h5.4
c1,0,1.8,0.8,1.8,1.8s-0.8,1.8-1.8,1.8H218v5.4c0,1-0.8,1.8-1.8,1.8s-1.8-0.8-1.8-1.8v-5.4h-5.4
C208.2,163.7,207.4,162.9,207.4,161.9z"/>
<path class="st3" d="M284.3,186.9c-0.1-0.5-0.3-1-0.3-1.2l-8.2-30.4c-1.9-7.8-8-13-15.3-13h-22.8c0-0.1,0-0.1,0-0.2v-19.9
c0-1-0.8-1.8-1.8-1.8s-1.8,0.8-1.8,1.8v19.9c0,0.1,0,0.1,0,0.2h-22.8c-7.4,0-13,6.4-15.2,12.8l-9.2,32.3c-0.4,1.4-0.6,2.9-0.6,4.4
c0,1,0,1.3,0.1,1.4c0.5,3.9,2.7,7.1,6.2,8.8c3.6,1.8,7.9,1.7,11.4-0.3c0.6-0.3,1.2-0.7,1.7-1.2l12.5-12.3c-1.1-0.5-2.1-1.1-3-2
l-11.8,11.7c-0.4,0.3-0.8,0.6-1.2,0.8c-2.5,1.4-5.5,1.5-8.1,0.2c-2.4-1.2-4-3.4-4.3-6.1c0-0.2,0-0.6,0-1.1c0-1.1,0.1-2.3,0.4-3.3
l9.2-32.1c1.8-5,6.3-10.4,11.9-10.4h49c5.6,0,10.4,4.1,11.9,10.4l8.1,29.9c0,0.3,0.2,0.7,0.4,1.6c0.4,1.3,1.1,4.1,1.1,5.1
c0,2.6-1.5,4.8-4,6.1c-3.1,1.6-6.9,1.3-9.6-0.5l-11.9-12.7c-0.7,0.9-1.7,1.6-2.8,2.2l12.2,13l0.3,0.2c2.2,1.6,4.8,2.3,7.4,2.3
c2,0,4.1-0.5,6-1.4c3.7-1.9,5.9-5.3,5.9-9.3C285.5,191.5,285,189.3,284.3,186.9z"/>
<path class="st3" d="M241.5,181.4c-0.1-0.4-0.1-0.8-0.1-1.2h-11.4c0,1.2-0.2,2.4-0.7,3.5h12.8C241.9,183,241.6,182.2,241.5,181.4z"
/>
<path class="st1" d="M226.5,179.7c-0.3-2.5-2.5-4.4-5-4.4c-0.2,0-0.4,0-0.6,0c-2.8,0.4-4.7,2.9-4.4,5.7c0.4,2.8,2.9,4.7,5.7,4.4
C224.9,185,226.9,182.4,226.5,179.7z"/>
<path class="st4" d="M230.1,180.2c0-0.3,0-0.6-0.1-1c-0.6-4.7-4.9-8-9.6-7.4c-4.7,0.6-8,4.9-7.4,9.6c0.2,1.9,1.1,3.5,2.3,4.8
c0.8,0.9,1.8,1.5,3,2c1,0.4,2.1,0.6,3.2,0.6c0.4,0,0.7,0,1.1-0.1c3.1-0.4,5.6-2.4,6.8-5.1C229.8,182.6,230.1,181.4,230.1,180.2z
M216.5,181c-0.4-2.8,1.6-5.3,4.4-5.7c0.2,0,0.4,0,0.6,0c2.5,0,4.7,1.9,5,4.4c0.4,2.8-1.6,5.3-4.4,5.7
C219.4,185.7,216.9,183.7,216.5,181z"/>
<path class="st1" d="M250.7,185.3c2.8-0.4,4.7-2.9,4.4-5.7c-0.3-2.5-2.5-4.4-5-4.4c-0.2,0-0.4,0-0.6,0c-2.8,0.4-4.7,2.9-4.4,5.7
C245.4,183.7,247.9,185.7,250.7,185.3z"/>
<path class="st4" d="M256.6,185.8c1.5-1.8,2.2-4.1,1.9-6.5c-0.6-4.7-4.9-8-9.6-7.4c-4.3,0.5-7.4,4.2-7.4,8.3c0,0.4,0,0.8,0.1,1.2
c0.1,0.8,0.3,1.6,0.6,2.3c1.3,3.1,4.4,5.2,7.9,5.2c0.4,0,0.7,0,1.1-0.1c1-0.1,1.9-0.4,2.7-0.8C254.9,187.4,255.8,186.7,256.6,185.8
z M245,181c-0.4-2.8,1.6-5.3,4.4-5.7c0.2,0,0.4,0,0.6,0c2.5,0,4.7,1.9,5,4.4c0.4,2.8-1.6,5.3-4.4,5.7
C247.9,185.7,245.4,183.7,245,181z"/>
<path class="st4" d="M214.5,169c0,1,0.8,1.8,1.8,1.8s1.8-0.8,1.8-1.8v-5.4h5.4c1,0,1.8-0.8,1.8-1.8s-0.8-1.8-1.8-1.8H218v-5.4
c0-1-0.8-1.8-1.8-1.8s-1.8,0.8-1.8,1.8v5.4h-5.4c-1,0-1.8,0.8-1.8,1.8s0.8,1.8,1.8,1.8h5.4V169z"/>
<path class="st4" d="M246.1,163.7c0.2,0,0.5,0,0.7,0c1.5,0,3-0.5,4.1-1.5c2.8-2.3,3.3-6.5,1-9.3c-2.3-2.8-6.5-3.3-9.3-1
c-2.8,2.3-3.3,6.5-1,9.3C242.8,162.6,244.3,163.5,246.1,163.7z M244.8,154.7c0.6-0.5,1.3-0.7,2-0.7c0.9,0,1.8,0.4,2.4,1.2
c1.1,1.3,0.9,3.3-0.5,4.4c-0.6,0.5-1.4,0.8-2.3,0.7c-0.8-0.1-1.6-0.5-2.1-1.1C243.3,157.7,243.5,155.8,244.8,154.7z"/>
<path class="st4" d="M260.9,170.8c0.2,0,0.5,0,0.7,0c1.5,0,3-0.5,4.1-1.5c1.4-1.1,2.2-2.7,2.4-4.4c0.2-1.8-0.3-3.5-1.4-4.8
s-2.7-2.2-4.4-2.4c-1.7-0.2-3.5,0.3-4.8,1.4c-1.4,1.1-2.2,2.7-2.4,4.4c-0.2,1.8,0.3,3.5,1.4,4.8S259.2,170.6,260.9,170.8z
M258.5,163.9c0.1-0.8,0.5-1.6,1.1-2.1c0.6-0.5,1.2-0.7,1.9-0.7c0.1,0,0.2,0,0.3,0c0.8,0.1,1.6,0.5,2.1,1.1
c0.5,0.6,0.8,1.5,0.7,2.3c-0.1,0.8-0.5,1.6-1.1,2.1c-0.6,0.5-1.5,0.8-2.3,0.7c-0.8-0.1-1.6-0.5-2.1-1.1
C258.7,165.5,258.4,164.7,258.5,163.9z"/>
<polygon class="st0" points="126.4,169.8 124.4,175.6 128.5,175.6 "/>
<path class="st0" d="M140.9,179c0.5,0,0.9-0.1,1.4-0.3c-0.3-0.2-0.7-0.4-1.1-0.7c-0.4-0.2-0.7-0.4-0.9-0.5
c-0.2-0.1-0.2-0.3-0.2-0.5c0-0.2,0.1-0.4,0.2-0.5c0.2-0.1,0.3-0.2,0.5-0.2c0.6,0,1.5,0.5,2.9,1.4c0.4-0.4,0.7-1,0.9-1.6
c0.2-0.6,0.3-1.3,0.3-2.1c0-1-0.2-1.9-0.5-2.6c-0.3-0.7-0.8-1.3-1.4-1.7s-1.3-0.6-2.1-0.6c-0.6,0-1.1,0.1-1.6,0.3
c-0.5,0.2-0.9,0.5-1.2,0.9c-0.3,0.4-0.6,0.9-0.8,1.5s-0.3,1.3-0.3,2.1c0,1.6,0.4,2.8,1.1,3.7C138.8,178.5,139.7,179,140.9,179z"/>
<path class="st0" d="M112,224.3c0-3.3-2.1-5.9-4.7-5.9c-1,0-1.8-0.8-1.8-1.8s0.8-1.8,1.8-1.8H154v-51.2c0-1-0.2-1.9-0.5-2.7
l-2.3-2.7c-0.6-0.3-1.2-0.5-1.9-0.5h-48.6c1.1,1.6,1.8,3.7,1.8,5.9v0.7v1.1v58.9c0,3.3,2.1,5.9,4.7,5.9S112,227.6,112,224.3z
M146.7,203.6h-21.5c-1,0-1.8-0.8-1.8-1.8s0.8-1.8,1.8-1.8h21.5c1,0,1.8,0.8,1.8,1.8S147.7,203.6,146.7,203.6z M134.6,171.1
c0.3-0.9,0.7-1.6,1.3-2.3c0.6-0.6,1.3-1.1,2.1-1.4c0.8-0.3,1.8-0.5,2.8-0.5c1.4,0,2.7,0.3,3.7,0.9c1,0.6,1.8,1.4,2.3,2.5
c0.5,1.1,0.8,2.3,0.8,3.8c0,2.2-0.6,3.9-1.8,5.2c0.4,0.3,0.9,0.5,1.3,0.8s0.8,0.5,1,0.6s0.2,0.4,0.2,0.7c0,0.2-0.1,0.4-0.3,0.6
c-0.2,0.2-0.4,0.3-0.7,0.3c-0.2,0-0.5-0.1-0.8-0.2c-0.3-0.1-0.7-0.3-1.1-0.6c-0.4-0.3-0.9-0.6-1.4-0.9c-0.9,0.5-2,0.7-3.4,0.7
c-1.1,0-2-0.2-2.9-0.5c-0.9-0.3-1.6-0.8-2.1-1.5c-0.6-0.6-1-1.4-1.3-2.3s-0.4-1.9-0.4-2.9C134.1,172.9,134.3,172,134.6,171.1z
M124,169.5c0.1-0.3,0.2-0.6,0.4-0.9c0.1-0.4,0.3-0.7,0.5-0.9c0.2-0.2,0.4-0.4,0.6-0.6c0.3-0.1,0.6-0.2,1-0.2c0.4,0,0.7,0.1,1,0.2
c0.3,0.1,0.5,0.3,0.6,0.6c0.2,0.2,0.3,0.5,0.4,0.8c0.1,0.3,0.2,0.6,0.4,1.1l3.6,8.9c0.3,0.7,0.4,1.2,0.4,1.5c0,0.3-0.1,0.6-0.4,0.9
c-0.3,0.3-0.6,0.4-1,0.4c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.3-0.2-0.4-0.3c-0.1-0.1-0.2-0.3-0.3-0.6c-0.1-0.3-0.2-0.5-0.3-0.7
l-0.7-1.7h-5.6l-0.7,1.8c-0.3,0.7-0.5,1.2-0.7,1.4s-0.5,0.4-0.9,0.4c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.3-0.4-0.6-0.4-0.9
c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.5,0.3-0.8L124,169.5z M110.8,168.8c0-0.4,0.1-0.7,0.2-1s0.3-0.4,0.6-0.6c0.3-0.1,0.6-0.2,1-0.2
h6.6c0.4,0,0.8,0.1,1,0.3s0.3,0.5,0.3,0.8c0,0.3-0.1,0.6-0.3,0.8s-0.5,0.3-1,0.3h-5.5v3.5h4.6c0.4,0,0.7,0.1,1,0.3
c0.2,0.2,0.3,0.4,0.3,0.8c0,0.3-0.1,0.6-0.3,0.8c-0.2,0.2-0.5,0.3-1,0.3h-4.6v4.6c0,0.6-0.1,1-0.4,1.3c-0.3,0.3-0.6,0.4-1,0.4
c-0.4,0-0.8-0.1-1-0.4s-0.4-0.7-0.4-1.3V168.8z M112.4,190.2h17.8c1,0,1.8,0.8,1.8,1.8s-0.8,1.8-1.8,1.8h-17.8
c-1,0-1.8-0.8-1.8-1.8S111.4,190.2,112.4,190.2z"/>
<path class="st1" d="M155.8,218.4h-42.1c1.1,1.6,1.8,3.7,1.8,5.9c0,0.3,0,0.6,0,0.9c0,0.1,0,0.2,0,0.3c0,0.2,0,0.4-0.1,0.6
c0,0.1,0,0.2-0.1,0.3c0,0.2-0.1,0.4-0.1,0.5c0,0.1-0.1,0.2-0.1,0.3c0,0.2-0.1,0.3-0.2,0.5c0,0.1-0.1,0.2-0.1,0.3
c-0.1,0.2-0.1,0.3-0.2,0.5c0,0.1-0.1,0.2-0.1,0.3c-0.1,0.2-0.2,0.4-0.3,0.6c0,0,0,0.1-0.1,0.1c-0.1,0.2-0.3,0.4-0.4,0.6h42.1
c2.6,0,4.7-2.6,4.7-5.9S158.4,218.4,155.8,218.4z"/>
<path class="st3" d="M157.5,215.1v-51.5c0-5.2-3.7-9.4-8.2-9.4h-55c-4.5,0-8.2,4.2-8.2,9.4v1.8h13v58.9c0,5.2,3.7,9.4,8.2,9.4h48.5
c4.5,0,8.2-4.2,8.2-9.4C164,219.8,161.2,216.1,157.5,215.1z M155.8,230.2h-42.1c0.1-0.2,0.3-0.4,0.4-0.6c0,0,0-0.1,0.1-0.1
c0.1-0.2,0.2-0.4,0.3-0.6c0-0.1,0.1-0.2,0.1-0.3c0.1-0.2,0.1-0.3,0.2-0.5c0-0.1,0.1-0.2,0.1-0.3c0.1-0.2,0.1-0.3,0.2-0.5
c0-0.1,0.1-0.2,0.1-0.3c0-0.2,0.1-0.3,0.1-0.5c0-0.1,0-0.2,0.1-0.3c0-0.2,0.1-0.4,0.1-0.6c0-0.1,0-0.2,0-0.3c0-0.3,0-0.6,0-0.9
c0-2.2-0.7-4.3-1.8-5.9h42.1c2.6,0,4.7,2.6,4.7,5.9S158.4,230.2,155.8,230.2z M155.8,216.7L155.8,216.7L155.8,216.7z M155.8,163.7
L155.8,163.7L155.8,163.7z M94.2,157.8c2.1,0,3.9,1.8,4.5,4.2h-9.1C90.3,159.5,92.1,157.8,94.2,157.8z M102.5,224.3v-58.9v-1.1
v-0.7c0-2.2-0.7-4.3-1.8-5.9h48.6c0.7,0,1.3,0.2,1.9,0.5c1,0.6,1.8,1.5,2.3,2.7c0.3,0.8,0.5,1.7,0.5,2.7v51.2h-46.8
c-1,0-1.8,0.8-1.8,1.8s0.8,1.8,1.8,1.8c2.6,0,4.7,2.6,4.7,5.9s-2.1,5.9-4.7,5.9S102.5,227.6,102.5,224.3z"/>
<path class="st1" d="M151.2,158.3l2.3,2.7C153,159.8,152.2,158.8,151.2,158.3z"/>
<path class="st1" d="M98.8,161.9c-0.6-2.4-2.4-4.2-4.5-4.2s-3.9,1.8-4.5,4.2H98.8z"/>
<line class="st5" x1="155.8" y1="216.7" x2="155.8" y2="216.7"/>
<line class="st5" x1="155.8" y1="163.7" x2="155.8" y2="163.7"/>
<path class="st4" d="M112.2,181.2c0.4,0,0.7-0.1,1-0.4c0.3-0.3,0.4-0.7,0.4-1.3v-4.6h4.6c0.4,0,0.7-0.1,1-0.3
c0.2-0.2,0.3-0.4,0.3-0.8c0-0.3-0.1-0.6-0.3-0.8c-0.2-0.2-0.5-0.3-1-0.3h-4.6v-3.5h5.5c0.4,0,0.8-0.1,1-0.3s0.3-0.5,0.3-0.8
c0-0.3-0.1-0.6-0.3-0.8s-0.5-0.3-1-0.3h-6.6c-0.4,0-0.7,0.1-1,0.2c-0.3,0.1-0.4,0.3-0.6,0.6s-0.2,0.6-0.2,1v10.7
c0,0.6,0.1,1,0.4,1.3S111.8,181.2,112.2,181.2z"/>
<path class="st4" d="M120.1,179.9c0,0.3,0.1,0.6,0.4,0.9c0.3,0.3,0.6,0.4,0.9,0.4c0.4,0,0.7-0.1,0.9-0.4s0.4-0.7,0.7-1.4l0.7-1.8
h5.6l0.7,1.7c0.1,0.2,0.2,0.5,0.3,0.7c0.1,0.3,0.2,0.5,0.3,0.6c0.1,0.1,0.2,0.2,0.4,0.3c0.2,0.1,0.3,0.1,0.6,0.1
c0.4,0,0.7-0.1,1-0.4c0.3-0.3,0.4-0.6,0.4-0.9c0-0.3-0.1-0.8-0.4-1.5l-3.6-8.9c-0.2-0.4-0.3-0.8-0.4-1.1c-0.1-0.3-0.2-0.5-0.4-0.8
c-0.2-0.2-0.4-0.4-0.6-0.6c-0.3-0.1-0.6-0.2-1-0.2c-0.4,0-0.7,0.1-1,0.2c-0.3,0.1-0.5,0.3-0.6,0.6c-0.2,0.2-0.3,0.5-0.5,0.9
c-0.1,0.4-0.3,0.7-0.4,0.9l-3.5,9c-0.1,0.4-0.2,0.6-0.3,0.8C120.1,179.6,120.1,179.7,120.1,179.9z M126.4,169.8l2.1,5.7h-4.1
L126.4,169.8z"/>
<path class="st4" d="M135.8,179.2c0.6,0.6,1.3,1.1,2.1,1.5c0.9,0.3,1.8,0.5,2.9,0.5c1.3,0,2.4-0.2,3.4-0.7c0.5,0.4,0.9,0.7,1.4,0.9
c0.4,0.3,0.8,0.5,1.1,0.6c0.3,0.1,0.6,0.2,0.8,0.2c0.3,0,0.5-0.1,0.7-0.3c0.2-0.2,0.3-0.4,0.3-0.6c0-0.3-0.1-0.5-0.2-0.7
s-0.5-0.4-1-0.6s-0.9-0.5-1.3-0.8c1.2-1.3,1.8-3,1.8-5.2c0-1.4-0.3-2.7-0.8-3.8c-0.5-1.1-1.3-1.9-2.3-2.5c-1-0.6-2.3-0.9-3.7-0.9
c-1.1,0-2,0.2-2.8,0.5c-0.8,0.3-1.5,0.8-2.1,1.4c-0.6,0.6-1,1.4-1.3,2.3c-0.3,0.9-0.5,1.9-0.5,2.9c0,1,0.1,2,0.4,2.9
S135.3,178.6,135.8,179.2z M137.2,171.9c0.2-0.6,0.5-1.1,0.8-1.5c0.3-0.4,0.8-0.7,1.2-0.9c0.5-0.2,1-0.3,1.6-0.3
c0.8,0,1.5,0.2,2.1,0.6s1.1,0.9,1.4,1.7c0.3,0.7,0.5,1.6,0.5,2.6c0,0.8-0.1,1.5-0.3,2.1c-0.2,0.6-0.5,1.1-0.9,1.6
c-1.3-1-2.3-1.4-2.9-1.4c-0.2,0-0.4,0.1-0.5,0.2c-0.2,0.1-0.2,0.3-0.2,0.5c0,0.2,0.1,0.4,0.2,0.5c0.2,0.1,0.5,0.3,0.9,0.5
c0.4,0.2,0.8,0.4,1.1,0.7c-0.5,0.2-1,0.3-1.4,0.3c-1.1,0-2.1-0.4-2.8-1.3c-0.7-0.9-1.1-2.1-1.1-3.7
C136.9,173.2,137,172.5,137.2,171.9z"/>
<path class="st4" d="M112.4,193.7h17.8c1,0,1.8-0.8,1.8-1.8s-0.8-1.8-1.8-1.8h-17.8c-1,0-1.8,0.8-1.8,1.8S111.4,193.7,112.4,193.7z
"/>
<path class="st4" d="M146.7,200.1h-21.5c-1,0-1.8,0.8-1.8,1.8s0.8,1.8,1.8,1.8h21.5c1,0,1.8-0.8,1.8-1.8S147.7,200.1,146.7,200.1z"
/>
<path class="st0" d="M27.6,84.3v8.4c0,1.8,1.5,3.3,3.3,3.3H66c1.8,0,3.3-1.5,3.3-3.3v-8.4H27.6z M49.6,91.6
c-0.9,0.7-2.2,0.5-2.8-0.4c-0.7-0.9-0.5-2.2,0.4-2.8c0.9-0.7,2.2-0.5,2.8,0.4C50.7,89.7,50.5,90.9,49.6,91.6z"/>
<path class="st0" d="M27.6,27.3v5.5h26.3V26c0-0.7,0.1-1.3,0.3-2H30.9C29.1,24,27.6,25.5,27.6,27.3z"/>
<line class="st6" x1="71.4" y1="82.2" x2="71.4" y2="82.2"/>
<line class="st6" x1="25.5" y1="82.2" x2="25.5" y2="82.2"/>
<line class="st6" x1="25.5" y1="34.9" x2="25.5" y2="34.9"/>
<path class="st3" d="M53.9,32.8H27.6v-5.5c0-1.8,1.5-3.3,3.3-3.3h23.3c0.8-2.4,3.1-4.2,5.8-4.2H30.9c-4.1,0-7.5,3.4-7.5,7.5v65.4
c0,4.1,3.4,7.5,7.5,7.5H66c4.1,0,7.5-3.4,7.5-7.5V71.6c0-1.2-0.9-2.1-2.1-2.1s-2.1,0.9-2.1,2.1v8.5H27.6V37h26.3V32.8z M25.5,34.9
L25.5,34.9L25.5,34.9z M25.5,82.2L25.5,82.2L25.5,82.2z M66,96H30.9c-1.8,0-3.3-1.5-3.3-3.3v-8.4h41.7v8.4C69.3,94.5,67.8,96,66,96
z M71.4,82.2L71.4,82.2L71.4,82.2z"/>
<path class="st3" d="M47.2,88.4c-0.9,0.7-1.1,1.9-0.4,2.8c0.7,0.9,1.9,1.1,2.8,0.4c0.9-0.7,1.1-1.9,0.4-2.8
C49.4,87.9,48.1,87.7,47.2,88.4z"/>
<path class="st1" d="M90.4,24H66H60c-1.1,0-2,0.9-2,2v17.4c0,1.1,0.9,2,2,2h2.6c0.6,0,1.1,0.2,1.5,0.6c0.4,0.4,0.6,0.9,0.6,1.5
l0,0.1l2.7-1.9c0.3-0.2,0.8-0.4,1.2-0.4h21.9c1.1,0,2-0.9,2-2V26C92.4,24.9,91.5,24,90.4,24z M64.7,37.5c-1.4,0-2.6-1.2-2.6-2.6
s1.2-2.6,2.6-2.6c1.4,0,2.6,1.2,2.6,2.6S66.1,37.5,64.7,37.5z M75.2,37.5c-1.4,0-2.6-1.2-2.6-2.6s1.2-2.6,2.6-2.6
c1.4,0,2.6,1.2,2.6,2.6S76.7,37.5,75.2,37.5z M85.4,37.5c-1.4,0-2.6-1.2-2.6-2.6s1.2-2.6,2.6-2.6s2.6,1.2,2.6,2.6
S86.8,37.5,85.4,37.5z"/>
<path class="st4" d="M90.4,19.8H66H60c-2.7,0-5,1.7-5.8,4.2c-0.2,0.6-0.3,1.3-0.3,2v6.8V37v6.3c0,3.4,2.7,6.1,6.1,6.1h0.4l-0.1,2.1
c0,0.8,0.4,1.5,1.1,1.9c0.3,0.2,0.7,0.3,1,0.3c0.4,0,0.8-0.1,1.2-0.4l5.5-3.8h21.2c3.4,0,6.1-2.7,6.1-6.1V26
C96.6,22.6,93.8,19.8,90.4,19.8z M92.4,43.3c0,1.1-0.9,2-2,2H68.5c-0.4,0-0.8,0.1-1.2,0.4l-2.7,1.9l0-0.1c0-0.6-0.2-1.1-0.6-1.5
c-0.4-0.4-0.9-0.6-1.5-0.6H60c-1.1,0-2-0.9-2-2V26c0-1.1,0.9-2,2-2H66h24.5c1.1,0,2,0.9,2,2V43.3z"/>
<path class="st3" d="M64.8,34.9c0-0.1-0.1-0.2-0.2-0.2c-0.1,0-0.2,0.1-0.2,0.2C64.5,35.1,64.8,35.1,64.8,34.9z"/>
<path class="st4" d="M67.3,34.9c0-1.4-1.2-2.6-2.6-2.6c-1.4,0-2.6,1.2-2.6,2.6s1.2,2.6,2.6,2.6C66.1,37.5,67.3,36.3,67.3,34.9z
M64.7,34.7c0.1,0,0.2,0.1,0.2,0.2c0,0.2-0.4,0.2-0.4,0C64.5,34.8,64.6,34.7,64.7,34.7z"/>
<path class="st3" d="M75.2,34.7c-0.1,0-0.2,0.1-0.2,0.2c0,0.2,0.4,0.2,0.4,0C75.4,34.8,75.3,34.7,75.2,34.7z"/>
<path class="st4" d="M75.2,32.3c-1.4,0-2.6,1.2-2.6,2.6s1.2,2.6,2.6,2.6c1.4,0,2.6-1.2,2.6-2.6S76.7,32.3,75.2,32.3z M75.1,34.9
c0-0.1,0.1-0.2,0.2-0.2s0.2,0.1,0.2,0.2C75.4,35.1,75.1,35.1,75.1,34.9z"/>
<path class="st3" d="M85.4,34.7c-0.1,0-0.2,0.1-0.2,0.2c0,0.2,0.4,0.2,0.4,0C85.6,34.8,85.5,34.7,85.4,34.7z"/>
<path class="st4" d="M85.4,32.3c-1.4,0-2.6,1.2-2.6,2.6s1.2,2.6,2.6,2.6s2.6-1.2,2.6-2.6S86.8,32.3,85.4,32.3z M85.2,34.9
c0-0.1,0.1-0.2,0.2-0.2s0.2,0.1,0.2,0.2C85.6,35.1,85.2,35.1,85.2,34.9z"/>
</g>
</svg>
</span>
<strong>분실물 문의</strong>
</a>
</li>
</ul>
</div>
</article>
</div>
</div>
</div>
</section>
<!-- //help -->
<footer id="footer">
<div id="footer_sns">
<div class="container">
<div class="footer_sns">
<ul>
<li class="icon s1"><a href="#"><span class="ir_pm">트위터</span></a></li>
<li class="icon s2"><a href="#"><span class="ir_pm">페이스북</span></a></li>
<li class="icon s3"><a href="#"><span class="ir_pm">인스타그램</span></a></li>
<li class="icon s4"><a href="#"><span class="ir_pm">구글 플레이</span></a></li>
<li class="icon s5"><a href="#"><span class="ir_pm">아이폰 앱스토어</span></a></li>
</ul>
<div class="tel">
<a href="#">ARS <em>1544-0070</em></a>
</div>
</div>
</div>
</div>
<div id="footer_infor">
<div class="container">
<div class="row">
<div class="footer_infor">
<h2><img src="assets/img/logo_footer.png" alt="megabox"></h2>
<ul>
<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>
<address>
<p>서울특별시 강남구 도산대로 156, 2층 메가박스중앙(주) (논현동, 중앙엠앤비사옥)<br><span class="bar2">대표자명 김진선</span> 개인정보보호 책임자 경영지원실 실장 박영진<br><span class="bar2">사업자등록번호 211-86-59478</span> 통신판매업신고번호 제 833호</p>
<p>Copyright 2014 by MegaboxJoongAng Inc. All right reserved</p>
</address>
</div>
</div>
</div>
</div>
</footer>
<!-- //footer -->
<!-- 트레일러 -->
<aside id="blackout" class="overlay">
<div id="trailerModal" class="modal">
<div id="trailer"></div><!-- YouTube 플레이어로 대체되는 부분 -->
</div>
<button id="hideTrailer" class="modal_close">닫기</button>
</aside>
<!-- //트레일러 -->
<!-- 자바스크립트 라이브러리 -->
<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 src="assets/js/iframe_api.js"></script>
<script src="assets/js/movie.js"></script>
<script src="assets/js/custom.js"></script>
</body>
</html>
@charset "utf-8";
/* 여백 초기화 */
body,div,ul,li,dl,dd,dt,ol,h1,h2,h3,h4,h5,h6,input,fieldset,legend,p,select,table,th,td,tr,textarea,button,form,figure,figcaption{margin:0; padding:0;}
/* a 링크 초기화 */
a {color: #222; text-decoration: none;}
a:hover {color: #2698cb;}
/* 폰트 초기화 */
body, input, textarea, select, button, table {font-family:'Noto Sans KR', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif; color: #222; font-size: 13px; line-height: 1.5;}
/* 폰트 스타일 초기화 */
em,address {font-style: normal;}
/* 블릿기호 초기화 */
ul,li,ol {list-style:none;}
/* 제목 태그 초기화 */
h1,h2,h3,h4,h5,h6 {font-size: 13px; font-weight: normal;}
/* 테두리 초기화 */
img,fieldset {border:0 none;}
/* 버튼 초기화 */
button {border: 0;}
/* 반응형 */
video,img {width: 100%;}
/* clearfix */
.clearfix{*zoom:1;}
.clearfix:before, .clearfix:after {display: block; content: '';line-height: 0;}
.clearfix:after {clear: both;}
/* IR 효과 */
.ir_pm {display:block; overflow:hidden; font-size:0; line-height:0; text-indent:-9999px;} /* 의미있는 이미지의 대체 텍스트를 제공하는 경우(Phark Method) */
.ir_wa {display:block; overflow:hidden; position:relative; z-index:-1; width:100%; height: 100%;} /* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때(WA IR) */
.ir_so {overflow: hidden; position:absolute; width:0; height:0; line-height:0; text-indent:-9999px;} /* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */
/* 아이콘 이미지 최적화 작업 */
.icon {background-image: url(../img/icon.png);}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 1.5dppx){
.icon {background-image: url(../img/icon@2.png); background-size: 500px;}
}
/* input style */
input {background-image: none;}
input[type=button],
input[type=reset],
input[type=text],
input[type=password],
input[type=submit],
input[type=search],
input[type=tel],
input[type=email] {
-webkit-appearance: none;
border-radius: 0
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
input:checked[type=checkbox] {
background-color: #666;
-webkit-appearance: checkbox
}
/* 셀렉트 메뉴 로그인 스타일 */
.ui_select1 {
background: #F8F8F8; height: 26px; border: 1px solid #d9d9d9;
padding: 0 5px; border-radius: 0;
}
/* 셀렉트 메뉴 메인 스타일 */
.ui_select2 {
width: 100%; box-sizing: border-box;
background: #2c2f34; color: #fff;
display: inline-block; height: 36px; margin: 0; padding: 0 10px;
vertical-align: middle; text-align: left; white-space: nowrap;
font-family: inherit; font-size: inherit; border: 0 none;
background: #2c2f34 url(../img/down.svg) no-repeat right 10px center;
background-size: 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* 로그인 텍스트 박스 스타일1 */
.ui_input1 {
border: 1px solid #d9d9d9; width: 200px; height: 26px;
font-size: 13px; text-indent: 14px; background: #f8f8f8;
vertical-align: middle;
}
/* 로그인 텍스트 박스 스타일1 */
.ui_input2 {
border: 1px solid #d9d9d9; width: 100px; height: 26px;
font-size: 13px; text-indent: 14px; background: #f8f8f8;
vertical-align: middle;
}
/* 메인 텍스트 박스 스타일1 */
.ui_input3 {
background: #2c2f34; color: #fff;
border: 0; width: 100%; height: 36px; padding: 0 10px;
}
.form_inline .form_group {display: inline-block; vertical-align: middle;}
@charset "utf-8";
/* 스킵 메뉴 */
#skip {position: relative;}
#skip a {position: absolute; left: 0; top: -40px; width: 140px; line-height: 30px; border: 1px solid #fff; color: #fff; text-align: center; background: #333; }
#skip a:active,
#skip a:focus {top: 0;}
/* 레이아웃 */
#mNav {display: none; position: absolute; top: 10px; right: 14px;}
#header {width: 100%; background-color: #fff; border-bottom: 1px solid #c6c6c6;}
#banner {position: relative;}
#movie {background-color: #f8f8f8;}
#event {}
#opening {margin: 17px 0; background: url(../img/bg01.jpg) no-repeat center top; background-size: cover;}
#new {}
#footer {background: #211f1f;}
/* 가운데 영역 */
.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 0;}
.event img {display: block;}
.event h2 {font-size: 30px; font-weight: 500; margin-bottom: 20px;}
.event .event_left {overflow: hidden; 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 {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;}
/* 새로운 영화 */
.new {padding: 100px 0; position: relative;}
.new h2 {font-size: 30px; font-weight: 500; margin-bottom: 20px;}
.new .new_left {position: relative; margin-right: 423px; height: 500px; background: #ccc url(../img/new01.jpg) center center; background-size: cover;}
.new .new_left .play {position: absolute; left: 50%; top: 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 {position: absolute; right: 0; top: 165px; width: 400px; height: 500px; padding: 34px; box-sizing: border-box; background: #f0f0f0;}
.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 {margin-bottom: 20px; height: 108px; overflow: hidden;}
.new .new_right .select {overflow: hidden;}
.new .new_right .select .s1 {float: left; width: 49%; background: #000; margin-right: 2%;}
.new .new_right .select .s2 {float: left; width: 49%; background: #000;}
.new .new_right .select .s3 {float: left; width: 100%; margin-top: 2%;}
.new .new_right .btn {overflow: hidden; margin-top: 2%; text-align: center;}
.new .new_right .btn a {float: left; width: 49%; box-sizing: border-box; display: block; padding: 10px 30px 12px 30px;}
.new .new_right .btn a.white {background-color: #fff; margin-right: 2%; color: #3a0e6a; border: 1px solid #3a0e6a;}
.new .new_right .btn a.purple {background-color: #3a0e6a; color: #fff; border: 1px solid #6e40c4;}
/* help */
.help {overflow: hidden; padding-bottom: 200px;}
.help article {float: left; width: 32%; margin-right: 2%; height: 350px; }
.help article > div {border: 1px solid #dbdbdb; height: 350px;}
.help article.help_box3 {margin-right: 0;}
.help article.help_box3 > div {border: 0;}
.help article h3 {font-size: 30px; font-weight: 500; margin-bottom: 20px;}
/* 공지사항 */
.notice {position: relative; padding: 17px;}
.notice ul {overflow: hidden;}
.notice ul li {float: left; text-align: center; margin-right: -1px;}
.notice ul li a {border: 1px solid #dbdbdb; font-size: 15px; color: #666; display: block; width: 80px; padding: 10px 20px; background-color: #f5f5f5;}
.notice ul li.active a {background-color: #fff;}
.notice ul li ul {position: absolute; left: 17px; top: 70px; width: 90%;}
.notice ul li ul li {width: 100%; box-sizing: border-box; text-align: left; padding: 17px; border-bottom: 1px solid #dbdbdb;}
.notice ul li ul li:last-child {border-bottom: 0;}
.notice ul li ul li dt em {color: #999;}
.notice ul li ul li dt .bar {position: relative; padding-right: 14px;}
.notice ul li ul li dt .bar:after {content: ''; position: absolute; right: 4px; top: 5px; width: 1px; height: 10px; background: #999;}
.notice ul li ul li dd {color: #777; padding-top: 3px; }
.notice ul li ul li a {border: 0; padding: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
/* 할인카드 */
.card {padding: 17px;}
.card ul li {position: relative; border: 1px solid #d7d7d7; padding: 17px; margin-bottom: 17px; min-height: 102px; box-sizing: border-box;}
.card ul li span {position: absolute; left: 17px; top: 17px;}
.card ul li span img {width: 105px;}
.card ul li strong {display: block; font-size: 18px; color: #777; padding-left: 120px;}
.card ul li em {display: block; font-size: 14px; color: #777; font-weight: 300; padding-left: 120px;}
/* 고객센터 */
.service ul {overflow: hidden;}
.service li {float: left; width: 50%; height: 193px; box-sizing: border-box; border: 1px solid #d7d7d7; text-align: center;}
.service li a span {display: block; width: 120px; height: 120px; margin: 20px auto 0 auto; overflow: hidden;}
.service li a strong {color: #666; font-size: 18px; font-weight: 500;}
.service li:nth-child(1) {border-right: 0; border-bottom: 0;}
.service li:nth-child(2) {border-bottom: 0;}
.service li:nth-child(3) {border-right: 0;}
/* 푸터 */
.footer_sns {position: absolute; right: 17px; top: 33px; z-index: 1;}
.footer_sns li {display: inline-block; width: 36px; height: 36px; margin-left: 4px;}
.footer_sns li.s1 {background-position: 0 -375px;}
.footer_sns li.s2 {background-position: -36px -375px;}
.footer_sns li.s3 {background-position: -72px -375px;}
.footer_sns li.s4 {background-position: -108px -375px;}
.footer_sns li.s5 {background-position: -144px -375px;}
.footer_sns li.s1:hover {background-position: 0 -411px;}
.footer_sns li.s2:hover {background-position: -36px -411px;}
.footer_sns li.s3:hover {background-position: -72px -411px;}
.footer_sns li.s4:hover {background-position: -108px -411px;}
.footer_sns li.s5:hover {background-position: -144px -411px;}
.footer_sns .tel {text-align: right; padding-top: 5px;}
.footer_sns .tel a {color: #8f8f8f; font-size: 21px;}
.footer_sns .tel a em {color: #fff;}
.footer_infor {padding: 50px 0; width: 80%;}
.footer_infor h2 img {width: 150px;}
.footer_infor ul {padding: 15px 0;}
.footer_infor li {position: relative; display: inline; padding-right: 16px; white-space: nowrap;}
.footer_infor li:after {content: ''; position: absolute; right: 5px; top: 5px; width: 1px; height: 11px; background: #8f8f8f;}
.footer_infor li:last-child:after {width: 0; height: 0;}
.footer_infor li a {color: #8f8f8f;}
.footer_infor address p {color: #8f8f8f; padding-bottom: 15px;}
/* 트레일러 */
.overlay {background: rgba(0, 0, 0, 0.92); display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 10000}
.modal {position: absolute;}
.modal_close {
background: url(../img/close.svg) no-repeat; background-size: 32px 32px;
border: 0; color: transparent;
display: block; width: 32px; height: 32px; overflow: hidden;
position: absolute; top: 24px; right: 24px; text-indent: 100%;
}
body.modal_on {overflow: hidden;}
/* 미디어쿼리 */
@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;}
.help article.help_box1 {width: 49%; margin-right: 2%;}
.help article.help_box2 {width: 49%; margin-right: 0;}
.help article.help_box3 {width: 100%; margin-top: 2%;}
.help article {height: auto;}
.service li {width: 25%; height: auto;}
.service li:nth-child(1) {border-bottom: 1px solid #d7d7d7;}
.service li:nth-child(2) {border-bottom: 1px solid #d7d7d7; border-right: 0;}
.service li a strong {display: block; padding-bottom: 10%;}
}
@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;}
.new .new_left {margin-right: 0; height: 400px;}
.new .new_right {position: relative; top: 0; width: 100%; height: auto;}
.footer_sns {position: static; text-align: center; background: #352c2c; padding-bottom: 15px;}
.footer_sns .tel {display: none;}
.footer_infor {width: 100%; text-align: center;}
}
@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 .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;}
#new .row {padding: 0 24px;}
.new {padding: 24px; background-color: #fff; margin-top: 24px;}
.new h2 {font-size: 24px; font-weight: 700; height: 27px; margin-bottom: 20px; padding-bottom: 10px;}
.new .new_right {padding: 24px;}
#help .row {padding: 0 24px;}
.help article.help_box1 {padding: 24px; box-sizing: border-box; width: 100%; background: #fff; margin-right: 0; margin-top: 24px;}
.help article.help_box2 {padding: 24px; box-sizing: border-box; width: 100%; background: #fff; margin-right: 0; margin-top: 24px;}
.help article.help_box3 {padding: 24px; width: 100%; background: #fff; margin-top: 0; margin-top: 24px;}
.help article.help_box1 h3 {font-size: 24px; font-weight: 700; height: 27px; margin-bottom: 20px; padding-bottom: 10px;}
.help article.help_box2 h3 {font-size: 24px; font-weight: 700; height: 27px; margin-bottom: 20px; padding-bottom: 10px;}
.help article.help_box3 h3 {display: none;}
.help article.help_box3 > div {height: auto;}
}
@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: 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;}
#new .row {padding: 0 8px;}
.new {padding: 16px; margin-top: 8px;}
.new h2 {font-size: 18px; margin-bottom: 0;}
.new .new_left {height: 300px;}
.new .new_right {padding: 17px;}
.new .new_right .title {font-size: 22px;}
.new .new_right .star {padding: 9px 0;}
.new .new_right .select .s1 {width: 100%; margin-right: 0; margin-bottom: 2%;}
.new .new_right .select .s2 {width: 100%;}
.footer_infor {padding: 30px 0;}
.footer_infor address p br {display: none;}
}
@media (max-width: 480px){
}
@media (max-width: 320px){
.movie_title li a {margin-right: 9px;}
}
(function($){
/* 트레일러 영상 플레이어를 활성화 */
/* YouTube iframe API: https://developers.google.com/youtube/player_parameters */
(function handleTrailer(){
// 셀럭터 캐시
var $selector = {
body: $( "body" ),
overlay: $( "#blackout" ),
modal: $( "#trailerModal" ),
showButton: $( "#showTrailer" ),
hideButton: $( "#hideTrailer" ),
};
// 플레이어
var player = {
obj: null, // 플레이어 오브젝트
query : {
theme: "dark",
color: "white",
controls: 1,
autoplay: 1,
enablejsapi: 1,
modestbranding: 0, // YouTube 로고 감춤
rel: 0, // 관련 동영상 표시
showinfo: 0, // 제목, 업로더 감춤
iv_load_policy: 3 // 특수효과 감춤
},
visible: false
};
// 보이기, 숨기기 버튼 활성화
$selector.showButton.on( "click", showPlayer );
$selector.hideButton.on( "click", hidePlayer );
//YouTube API를 이용해 iframe을 생성
function setPlayer( id ){
player.obj = new YT.Player( "trailer", {
width: 480,
height: 282,
videoId: id,
playerVars: player.query
});
// 처음 플레이어 크기 설정
resizePlayer();
// 리사이즈 화면 회전시 플레이어 크기 다시 설정
$( window ).on( "resize orientationchange", function() {
resizePlayer();
});
}
function resizePlayer() {
var viewport = {}, frame = {}, modal = {};
viewport.width = $( window ).width();
viewport.height = $( window ).height();
frame.width = viewport.width;
frame.height = frame.width / 1.6; // 16 : 10
modal.top = ( ( viewport.height - frame.height ) / 2 ) + "px";
modal.left = "0px";
$selector.modal.css( modal );
player.obj.setSize( frame.width, frame.height );
}
// iframe 보이기
function showPlayer() {
if ( !player.obj ) {
setPlayer( $selector.showButton.data("youtube") );
}
$selector.body.addClass("modal_on");
$selector.overlay.show();
player.visible = true;
};
// iframe 감추기
function hidePlayer (){
player.obj.stopVideo();
$selector.overlay.hide();
$selector.body.removeClass("modal_on");
player.visible = false;
};
})();
})(jQuery);
(function($){
//배너 이미지 슬라이드
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
}
}
});
//영화차트 탭 메뉴
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 tabMenu = $(".notice");
//컨텐츠 내용을 숨겨주세요!
tabMenu.find("ul > li > ul").hide();
tabMenu.find("li.active > ul").show();
function tabList(e){
e.preventDefault(); //#의 기능을 차단
var target = $(this);
target.next().show().parent("li").addClass("active").siblings("li").removeClass("active").find("ul").hide();
//버튼을 클릭하면 ~ul를 보여주고
//부모의 li태그에 클래스 추가하고
//형제의 li태그에 클래스 제거하고
//제거한 자식의 ul 태그를 숨겨줌
}
tabMenu.find("ul > li > a").click(tabList).focus(tabList);
})(jQuery);
728x90
