- See Full Page →
-
`21 Movie Theater,
Brand Site
Megabox
Web Site
1
Skill Used
→ Grid System → Responsive design
→ UI Design → UX Design → Prototyping *
→ UI Design → UX Design → Prototyping *
디바이스별로 그리드 시스템을 적용하여 반응형 작업을
진행하였습니다.
디바이스에 상관없이 사용자들이 동일한
웹사이트를 볼 수 있습니다. 탭 메뉴,
이미지 슬라이더, 모달
등 플러그인 활용과 스크립트로 코드를 작성하였습니다.
영화
사이트의 필수 요건들을 벤치마킹하여 컨텐츠를 구성하였고, 유튜브
API를
적용해 영화관 사이트 내에서 고객들이 트레일러 영상을
바로 볼 수 있습니다.
Informations
Viewport : Desktop
IE Support : IE9+
| Category | Source | Related Keyword |
|---|---|---|
| HTML | Index.html | HTML5 |
| CSS | swiper.css | CSS3 |
| CSS | style.css | CSS3 |
| JS | iframe-api.js | Youtube API |
| JS | movie.js | iframe ∙ API |
| JS | custom.js | Script ∙ Swiper |
2
Code View
- Index.html
- swiper.css
- style.css
- iframe-api.js
- movie.js
- custom.js
<!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="saeyoung choi">
<meta name="description" content="메가박스 사이트 클론코딩">
<meta name="keywords" content="메가박스, 영화, 최신영화, 영화관, CGV, 롯데시네마">
<title>Megabox Site</title>
<!-- CSS -->
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/slick.css">
<link rel="stylesheet" href="assets/css/swiper.css">
<link rel="stylesheet" href="assets/css/font-awesome.css">
<!-- Favicon -->
<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" />
<!-- Facebook Meta Tag -->
<meta property="og:title" content="메가박스 사이트 만들기" />
<meta property="og:image" content="http:/effysode.co.kr/project/MeagaBox/assets/icons/favicon.ico" />
<meta property="og:description" content="메가박스 사이트 클론코딩" />
<!-- Web Font -->
<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>
<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 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>Minari</em></h2>
<p>낯선 땅에 뿌리 내린 희망</p>
</div>
</div>
</div>
<div class="swiper-slide ss2">
<div class="container">
<div class="row">
<h2>더 랍스터 <em>The Lobster</em></h2>
<p>사랑은 서로 같음이 아니다</p>
</div>
</div>
</div>
<div class="swiper-slide ss3">
<div class="container">
<div class="row">
<h2>유스 <em>Youth</em></h2>
<p>끝나지 않을 아름다운 순간들</p>
</div>
</div>
</div>
<div class="swiper-slide ss4">
<div class="container">
<div class="row">
<h2>카페 소사이어티 <em>Cafe Society</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 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/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 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/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 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/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 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/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 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/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 all ir_pm">전체관람가</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 a19 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/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 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/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 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 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="미드90">
</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 all ir_pm">전체관람가</span> <strong>미드 90</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>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 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/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 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/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 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/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/poster01.jpg" srcset="assets/img/poster01@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 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>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 a12 ir_pm">12세</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 a15 ir_pm">15세</span> <strong>투 라이프</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster10.jpg" srcset="assets/img/poster10@2.jpg 2x" alt="패왕별희">
</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 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/poster09.jpg" srcset="assets/img/poster09@2.jpg 2x" alt="미드90">
</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 all ir_pm">전체관람가</span> <strong>미드 90</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster01.jpg" srcset="assets/img/poster01@2.jpg 2x" alt="벌새">
</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 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>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 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/poster02.jpg" srcset="assets/img/poster02@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 all ir_pm">전체관람가</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="남포항점 2021 시즌할인권">
</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">2021.01 ~ 2021.03</strong>
<p class="desc">LIFE THEATER로 새롭게 시작하는 메가박스를 만나보세요!</p>
<div class="open_box">
<div>
<h3>리뉴얼 오픈</h3>
<p><em>서울</em><strong>센트럴점</strong>03월 08일</p>
</div>
<div>
<h3>리뉴얼 오픈</h3>
<p><em>서울</em><strong>코엑스몰점</strong>04월 10일</p>
</div>
<div>
<h3>리뉴얼 오픈</h3>
<p><em>경기도</em><strong>용인테크노밸리</strong>04월 24일</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">2021년 04월 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="2021년 4월 28일" 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>2021.03.20</em></dt>
<dd><a href="#">[무대인사] 왕가위 감독 영화 재개봉 및 영상 제작 20주년 기념 라이브 쇼</a></dd>
</dl>
</li>
<li>
<dl>
<dt><strong class="bar">전체</strong> <em>2021.03.24</em></dt>
<dd><a href="#">[무대인사] 왕가위 감독 영화 재개봉 및 영상 제작 20주년 기념 라이브 쇼</a></dd>
</dl>
</li>
<li>
<dl>
<dt><strong class="bar">전체</strong> <em>2021.03.28</em></dt>
<dd><a href="#">[무대인사] 왕가위 감독 영화 재개봉 및 영상 제작 20주년 기념 라이브 쇼</a></dd>
</dl>
</li>
<li>
<dl>
<dt><strong class="bar">전체</strong> <em>2021.04.03</em></dt>
<dd><a href="#">[무대인사] 왕가위 감독 영화 재개봉 및 영상 제작 20주년 기념 라이브 쇼</a></dd>
</dl>
</li>
</ul>
</li>
<li><a href="#">영화관 공지</a>
<ul>
<li>
<dl>
<dt><strong class="bar">건대입구</strong> <em>2021.03.23</em></dt>
<dd><a href="#">[영화인사] 터미네이터6 시즌 발표 및 영상 제작 10주년 기념 라이브 쇼</a></dd>
</dl>
</li>
<li>
<dl>
<dt><strong class="bar">청담</strong> <em>2021.03.24</em></dt>
<dd><a href="#">[영화인사] 터미네이터6 시즌 발표 및 영상 제작 10주년 기념 라이브 쇼</a></dd>
</dl>
</li>
<li>
<dl>
<dt><strong class="bar">서울</strong> <em>2021.03.28</em></dt>
<dd><a href="#">[영화인사] 터미네이터6 시즌 발표 및 영상 제작 10주년 기념 라이브 쇼</a></dd>
</dl>
</li>
<li>
<dl>
<dt><strong class="bar">전체</strong> <em>2021.04.12</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>우리카드 일반</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>신한 멤버십 일반</strong>
<em>영화 3,000원 현장 즉시 할인 (1일 2매)</em>
</a>
</li>
<li>
<a href="#">
<span><img src="assets/img/card03.jpg" srcset="assets/img/card03@2.jpg 2x" alt="card01"></span>
<strong>KB카드 일반</strong>
<em>영화 3,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 2020 by MegaboxJoongAng Inc. All right reserved</p>
</address>
</div>
</div>
</div>
</div>
</footer>
<!-- //footer -->
<!-- trailer -->
<aside id="blackout" class="overlay">
<div id="trailerModal" class="modal">
<div id="trailer"></div><!-- YouTube 플레이어로 대체되는 부분 -->
</div>
<button id="hideTrailer" class="modal_close">닫기</button>
</aside>
<!-- //trailer -->
<!-- JavaScript Libraries -->
<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>
/**
* Swiper 4.5.0
* Most modern mobile touch slider and framework with hardware accelerated transitions
* http://www.idangero.us/swiper/
**/
.swiper-container {
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1;
}
.swiper-container-no-flexbox .swiper-slide {
float: left;
}
.swiper-container-vertical > .swiper-wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
transition-property: transform;
box-sizing: content-box;
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.swiper-container-free-mode > .swiper-wrapper {
transition-timing-function: ease-out;
margin: 0 auto;
}
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition-property: transform;
z-index: 5;
}
.swiper-slide .container {z-index: 20;}
.swiper-slide:after {
content: '';
position: absolute;
z-index: 2;
left: 0; top: 0;
width: 100%; height: 100%;
background: #000;
opacity: .2;
}
.swiper-container2 .swiper-slide:after {
opacity: 0;
}
.swiper-slide-invisible-blank {
visibility: hidden;
}
/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
height: auto;
}
.swiper-container-autoheight .swiper-wrapper {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
transition-property: height, -webkit-transform;
transition-property: transform, height;
}
/* IE10 Windows Phone 8 Fixes */
.swiper-container-wp8-horizontal,
.swiper-container-wp8-horizontal > .swiper-wrapper {
-ms-touch-action: pan-y;
touch-action: pan-y;
}
.swiper-container-wp8-vertical,
.swiper-container-wp8-vertical > .swiper-wrapper {
-ms-touch-action: pan-x;
touch-action: pan-x;
}
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
width: 27px;
height: 44px;
margin-top: -22px;
z-index: 10;
cursor: pointer;
background-size: 27px 44px;
background-position: center;
background-repeat: no-repeat;
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
left: 16px;
right: auto;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
right: 16px;
left: auto;
}
.swiper-button-lock {
display: none;
}
.swiper-pagination {
position: absolute;
text-align: center;
transition: 300ms opacity;
transform: translate3d(0, 0, 0);
z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0;
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 10px;
left: 0;
width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
overflow: hidden;
font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transform: scale(0.33);
position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
transform: scale(0.33);
}
.swiper-pagination-bullet {
width: 18px;
height: 18px;
display: inline-block;
border-radius: 100%;
background: #ccc;
opacity: 0.2;
}
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer;
}
.swiper-pagination-bullet-active {
opacity: 1;
background: #fff;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 4px;
}
@charset "utf-8";
/* skip-menu */
#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;}
/* layout */
#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;}
/* center */
.container {position: relative; width: 1280px; margin: 0 auto; background: rgba(0,0,0,0); }
/* row */
.row {padding: 0 28px;}
/* mobile */
.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 */
.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 */
.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 */
.slider {width: 100%; height: 600px;}
.slider .ss1 {background: url(../img/swiper01.jpg) no-repeat center center; background-size: cover;}
.slider .ss2 {background: url(../img/swiper02.jpg) no-repeat center center; background-size: cover;}
.slider .ss3 {background: url(../img/swiper03.jpg) no-repeat center center; background-size: cover;}
.slider .ss4 {background: url(../img/swiper04.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 */
.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.a12 {background-position: 0px -125px;}
.movie_chart > div > div > div .infor h3 span.a15 {background-position: -29px -125px;}
.movie_chart > div > div > div .infor h3 span.a19 {background-position: -58px -125px;}
.movie_chart > div > div > div .infor h3 span.all {background-position: -87px -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 */
.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 */
.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 movie */
.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 */
.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 */
.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 */
.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 */
.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;}
/* trailer */
.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;}
/* responsive */
@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: 320px){
.movie_title li a {margin-right: 9px;}
}
if (!window['YT']) {var YT = {loading: 0,loaded: 0};}
if (!window['YTConfig']) {var YTConfig = {'host': 'http://www.youtube.com'};}
if (!YT.loading) {YT.loading = 1;
(function(){var l = [];
YT.ready = function(f) {if (YT.loaded) {f();} else {l.push(f);}};window.onYTReady = function() {YT.loaded = 1;for (var i = 0; i < l.length; i++) {try {l[i]();} catch (e) {}}};YT.setConfig = function(c) {for (var k in c) {if (c.hasOwnProperty(k)) {YTConfig[k] = c[k];}}};var a = document.createElement('script');a.type = 'text/javascript';a.id = 'www-widgetapi-script';a.src = 'https://s.ytimg.com/yts/jsbin/www-widgetapi-vflTZdOF2/www-widgetapi.js';a.async = true;var c = document.currentScript;if (c) {var n = c.nonce || c.getAttribute('nonce');if (n) {a.setAttribute('nonce', n);}}var b = document.getElementsByTagName('script')[0];b.parentNode.insertBefore(a, b);})();}
(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();
});
}
// 화면 크기 비례, iframe 크기 조절
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() {
// 처음 클릭시 iframe 생성
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);