728x90
반응형
하이시네마_ 공지사항, 푸터란 만들기
html 마크업
.help는 세개의 박스를 옆으로 띄워야하기 때문에 .help안에 clearfix를 넣는다.
.help css 편집
.help 안에 세개 박스 편집하기
article의 마지막 아이의 border를 0주어 박스를 삭제한다.
. 클래스를 지정해줬으니 이름을 넣어줘도 된다.
article > .help_box3
.notice html markup
● dl : 타이틀과 데이터를 싸고 있는 박스
● dt : 타이틀 작성
● dd : 데이터 작성
>> 영어사전에 많이 사용되는 형식이다.
.notice css edit
기준값이 다르기 때문에 정렬이 다르다.
정렬을 맞춰줘야한다.
position을 띄워서 기준점을 맞추어준다.
a tag edit
<tabmenu script>
.card html mark up
.card css edit
.service html mark up
● svg : 그림을 글자화, 모형 그대로 태그가 와서 용량이 적다.
.servie css edit
중복되는 border 선 지우기
반응형 넣기
width : 1024px
width 768px
width:600px
#footer html mark up
.footer_sns css edit
footer_sns hover 적용
.footer_sns 위치 지정
.footer_infor html markup
footer 반응형
width: 960px
width: 600px
<html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>하이시네마_1</title>
<!-- CSS -->
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/swiper.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/media.css">
<!-- 파비콘 -->
<link rel="shortcut icon" href="./image/ICON.png">
</head>
<body>
<header id="header">
<div class="container">
<div class="row">
<div class="header clearfix">
<h1 class="logo">
<a href="#">
<em><img src="./image/logo.png" alt="하이시네마"></em>
<strong><img src="./image/logo_sub.png" alt="하이미디어영화관"></strong>
</a>
</h1>
<nav id="mNav">
<h2 class="ir_su">하이시네마 전체메뉴(모바일)</h2>
<a href="#" class="ham"><span></span></a> <!--span으로 가상요소 만들 예정-->
</nav>
<nav class="nav">
<h2 class="ir_su">하이시네마 전체메뉴(PC)</h2>
<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><!--//.header-->
</div><!--//row-->
</div><!--//container-->
</header><!--//#header-->
<section id="banner">
<h2 class="ir_su">최신 영화 소식</h2>
<!-- 베너메뉴 -->
<div class="banner_menu clearfix">
<div class="container">
<div class="row">
<div class="bm_left">
<ul class="clearfix">
<li class="total"><a href="#">전체메뉴</a></li>
<li class="line"><a href="#">필름 소사이어티</a></li>
<li><a href="#">클래식 소사이어티</a></li>
</ul>
</div>
<div class="bm_right clearfix">
<ul class="clearfix">
<li class="line"><a href="#">고객센터</a></li>
<li class="line"><a href="#">멤버십</a></li>
<li><a href="#">VIP</a></li>
</ul>
<ul class="clearfix">
<li class="white"><a href="#">상영시간표</a></li>
<li class="purple"><a href="#">빠른예매</a></li>
</ul>
</div>
</div><!--row-->
</div><!--container-->
</div>
<!-- 이미지 -->
<div class="slider">
<div class="container">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide s1">
<h3>첫번째 슬라이드</h3>
<p>스와이퍼를 잘 사용합시다</p>
</div>
<div class="swiper-slide s2">
<h3>두번째 슬라이드</h3>
<p>코딩 잘하고싶다.</p>
</div>
<div class="swiper-slide s3">
<h3>세번째 슬라이드</h3>
<p>코딩의 제왕이 되자</p>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
</div>
</div>
</div>
</section><!--//banner-->
<section id="movie">
<div class="container">
<div class="row">
<h2 class="ir_su">영화예매</h2>
<div class="movie">
<div class="movie_title">
<ul class="clearfix">
<li class="active"><a href="#">박스오피스</a></li>
<li><a href="#">최신개봉작</a></li>
<li><a href="#">상영예정작</a></li>
<li><a href="#">큐레이션</a></li>
</ul>
</div><!--movie_title-->
<div class="movie_chart">
<div class="chart1">
<div class="swiper2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="./image/poster01.jpg" alt="포스터1">
</figure>
<div class="rank">
<strong>1</strong>
</div>
<div class="mx">
<span class="m icon ir_pm">MX</span>
<span class="b icon ir_pm">Boutique</span>
</div>
</div>
<div class="info">
<h3>
<span class="icon all ir_pm">관람가</span>
<strong>삼진그룹</strong>
</h3>
<div class="info_btn">
<a href="#">상세정보</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="./image/poster02.jpg" alt="포스터1">
</figure>
<div class="rank">
<strong>2</strong>
</div>
<div class="mx">
<span class="m icon ir_pm">MX</span>
<span class="b icon ir_pm">Boutique</span>
</div>
</div>
<div class="info">
<h3>
<span class="icon a12 ir_pm">관람가</span>
<strong>동굴</strong>
</h3>
<div class="info_btn">
<a href="#">상세정보</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="./image/poster04.jpg" alt="포스터1">
</figure>
<div class="rank">
<strong>3</strong>
</div>
<div class="mx">
<span class="m icon ir_pm">MX</span>
<span class="b icon ir_pm">Boutique</span>
</div>
</div>
<div class="info">
<h3>
<span class="icon a15 ir_pm">관람가</span>
<strong>내가죽던날</strong>
</h3>
<div class="info_btn">
<a href="#">상세정보</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="./image/poster05.jpg" alt="포스터1">
</figure>
<div class="rank">
<strong>4</strong>
</div>
<div class="mx">
<span class="m icon ir_pm">MX</span>
<span class="b icon ir_pm">Boutique</span>
</div>
</div>
<div class="info">
<h3>
<span class="icon a19 ir_pm">관람가</span>
<strong>검객</strong>
</h3>
<div class="info_btn">
<a href="#">상세정보</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="./image/poster06.jpg" alt="포스터1">
</figure>
<div class="rank">
<strong>5</strong>
</div>
<div class="mx">
<span class="m icon ir_pm">MX</span>
<span class="b icon ir_pm">Boutique</span>
</div>
</div>
<div class="info">
<h3>
<span class="icon a15 ir_pm">관람가</span>
<strong>1987</strong>
</h3>
<div class="info_btn">
<a href="#">상세정보</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="./image/poster07.jpg" alt="포스터1">
</figure>
<div class="rank">
<strong>6</strong>
</div>
<div class="mx">
<span class="m icon ir_pm">MX</span>
<span class="b icon ir_pm">Boutique</span>
</div>
</div>
<div class="info">
<h3>
<span class="icon a15 ir_pm">관람가</span>
<strong>검사외전</strong>
</h3>
<div class="info_btn">
<a href="#">상세정보</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<div class="chart2">
<div class="swiper2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="./image/new1.jpg" alt="인디아나존스">
</figure>
<div class="rank">
<strong>1</strong>
</div>
<div class="mx ir_pm">
<span class="m icon">mx</span>
<span class="b icon">Boutique</span>
</div>
</div>
<div class="info">
<h3>
<span class="icon all ir_pm">관람가</span>
<strong>인디아나존스</strong>
</h3>
<div class="info_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="./image/new2.jpg" alt="스파이더맨">
</figure>
<div class="rank">
<strong>2</strong>
</div>
<div class="mx ir_pm">
<span class="m icon">mx</span>
<span class="b icon">Boutique</span>
</div>
</div>
<div class="info">
<h3>
<span class="icon all ir_pm">관람가</span>
<strong>스파이더맨</strong>
</h3>
<div class="info_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="./image/new3.jpg" alt="엘리멘탈">
</figure>
<div class="rank">
<strong>3</strong>
</div>
<div class="mx ir_pm">
<span class="m icon">mx</span>
<span class="b icon">Boutique</span>
</div>
</div>
<div class="info">
<h3>
<span class="icon all ir_pm">관람가</span>
<strong>엘리멘탈</strong>
</h3>
<div class="info_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="./image/new4.jpg" alt="범죄도시3">
</figure>
<div class="rank">
<strong>4</strong>
</div>
<div class="mx ir_pm">
<span class="m icon">mx</span>
<span class="b icon">Boutique</span>
</div>
</div>
<div class="info">
<h3>
<span class="icon a19 ir_pm">관람가</span>
<strong>범죄도시3</strong>
</h3>
<div class="info_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="./image/new5.jpg" alt="악마들">
</figure>
<div class="rank">
<strong>5</strong>
</div>
<div class="mx ir_pm">
<span class="m icon">mx</span>
<span class="b icon">Boutique</span>
</div>
</div>
<div class="info">
<h3>
<span class="icon a19 ir_pm">관람가</span>
<strong>악마들</strong>
</h3>
<div class="info_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="./image/new6.jpg" alt="귀공자">
</figure>
<div class="rank">
<strong>6</strong>
</div>
<div class="mx ir_pm">
<span class="m icon">mx</span>
<span class="b icon">Boutique</span>
</div>
</div>
<div class="info">
<h3>
<span class="icon a15 ir_pm">관람가</span>
<strong>귀공자</strong>
</h3>
<div class="info_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="chart3">chart3</div>
<div class="chart4">chart4</div>
</div><!--movie_chart-->
</div><!--movie-->
</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_slide">
<img src="./image/eve1.png" alt="이벤트이미지">
</div>
<div class="event_box1">
<img src="./image/eve2.png" alt="관람권런칭">
</div>
<div class="event_box2">
<img src="./image/event2.png" alt="부평점 시즌할인권">
</div>
</div>
<div class="event_right">
<img src="./image/event0.png" alt="사표대신 영화표">
</div>
</div>
</div>
</div>
</section><!--//event-->
<section id="opening">
<div class="container">
<div class="row">
<div class="opening">
<h2><span class="icon2 grand ir_pm">Grand Opening</span></h2>
<strong class="icon2 date ir_pm">2023. 07.~ 2023. 09</strong>
<p class="desc">LIFE THEATER로 새로운 하이시네마를 만나보세요!</p>
<div class="open_box">
<div>
<h3>리뉴얼 오픈</h3>
<p>
<em>경기도</em>
<strong>안양</strong>
7월 15일
</p>
</div>
<div>
<h3>리뉴얼 오픈</h3>
<p>
<em>경기도</em>
<strong>인덕원 사거리</strong>
7월 30일
</p>
</div>
<div>
<h3>리뉴얼 오픈</h3>
<p>
<em>경기도</em>
<strong>구리역점</strong>
7월 28일
</p>
</div>
</div>
</div><!--//opening-->
</div>
</div>
</section>
<section id="new">
<div class="container">
<div class="row">
<div class="new">
<h2><em>새로운 영화</em></h2>
<div class="new_left"><iframe width="100%" height="500" src="https://www.youtube.com/embed/_-nMy2goCnI" title="[스타워즈: 라이즈 오브 스카이워커] 메인 예고편" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
<div class="new_right">
<h3 class="title">스타워즈: <span>라이즈 오브 스카이워커<span></h3>
<span class="release">2020년1월개봉</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>액션 </span>
<span>미국, 오스트레일리아</span>
</li>
<li class="age">
<span>142분 </span>
<span>12세 관람가</span>
</li>
<li class="desc">
더욱 강력해진 포스로 돌아온 ‘레이’는 전 우주를 어둠의 힘으로 지배하려는 ‘카일로 렌’에게 대적할 유일한 히로인으로 거듭난다. 미래의 운명을 쥔 ‘레이’는 든든한 조력자이자 친구인 ‘핀’, ‘포’와 함께 새로운 미래를 위한 험난한 여정을 떠나고, 선과 악의 거대한 전쟁을 마주하게 된다. 또한 ‘카일로 렌’과의 피할 수 없는 운명적 대결을 펼치게 되는데… 전쟁을 끝내고 새로운 전설로 탄생할 선택받은 영웅은 누가 될 것인가?!
</li>
</ul>
<div class="select">
<div class="s1">
<label for="udate" class="ir_pm">날짜</label>
<input type="text" id="udate" name="udate" value="2016년 1월 25일 " class="ui_select1">
</div>
<div class="s2">
<label for="utime" class="ir_pm">시간</label>
<select name="utime" id="utime" class="ui_select2">
<option value="오전 0:00">오전 0:00</option>
<option value="오전 1:00">오전 1:00</option>
<option value="오전 3:00">오전 3:00</option>
<option value="오전 5:00">오전 5:00</option>
<option value="오전 7:00">오전 7:00</option>
<option value="오전 9:00">오전 9:00</option>
<option value="오전 11:00">오전 11:00</option>
<option value="오후 13:00">오후 13:00</option>
</select>
</div>
<div class="s3">
<label for="utext" class="ir_pm">주소 또는 도로명을 입력해주세요.</label>
<input type="text" id="utext" name="utext" class="ui_input" placeholder="주소 또는 도로명을 입력해주세요.">
</div>
</div>
<div class="btn">
<a href="#" class="white">좌석확인</a>
<a href="#" class="purple">예매하기</a>
</div>
</div>
</div><!--//new-->
</div>
</div>
</section>
<section id="help">
<div class="container">
<div class="row">
<div class="help clearfix">
<article class="help_box1">
<h3><em>공지사항</em></h3>
<div class="notice">
<ul>
<li class="active"><a href="#">전체공지</a>
<ul>
<li>
<dl>
<dt>
<strong>전체</strong>
<span>2023.07.11</span>
</dt>
<dd>
[무대인사] (범죄도시3) 1주차 마동석 용산 CGV 무대인사
</dd>
</dl>
</li>
<li>
<dl>
<dt>
<strong>전체</strong>
<span>2023.07.11</span>
</dt>
<dd>
[무대인사] (엘리멘탈) 1주차 관람 누적 수 백만명 돌파
</dd>
</dl>
</li>
<li>
<dl>
<dt>
<strong>전체</strong>
<span>2023.07.11</span>
</dt>
<dd>
[무대인사] (범죄도시3) 1주차 관람 누적 수 백만명 돌파
</dd>
</dl>
</li>
</ul>
</li>
<li><a href="#">영화관 공지</a>
<ul>
<li>
<dl>
<dt>
<strong>영화관</strong>
<span>2023.07.11</span>
</dt>
<dd>
[이벤트] (범죄도시3) 스티커
사진 부스 설치
</dd>
</dl>
</li>
<li>
<dl>
<dt>
<strong>영화관</strong>
<span>2023.07.11</span>
</dt>
<dd>
[CGV 매점] CGV 콤보 굿즈
이벤트 진행
</dd>
</dl>
</li>
<li>
<dl>
<dt>
<strong>영화관</strong>
<span>2023.07.11</span>
</dt>
<dd>
[무대인사] (범죄도시3) 1주차 관람 누적 수 백만명 돌파
</dd>
</dl>
</li>
</ul>
</li>
</ul>
</div>
</article>
<article class="help_box2">
<h3><em>할인카드</em></h3>
<div class="card">
<ul>
<li>
<a href="#">
<span><img src="./image/card01.jpg" alt="카드1"></span>
<strong>W멤버쉽 일반</strong>
<em>영화 2,000원 현장 즉시 할인(1일 4매)</em>
</a>
</li>
<li>
<a href="#">
<span><img src="./image/card02.jpg" alt="카드1"></span>
<strong>S멤버쉽 일반</strong>
<em>영화 3,000원 현장 즉시 할인(1일 4매)</em>
</a>
</li>
<li>
<a href="#">
<span><img src="./image/card03.jpg" alt="카드1"></span>
<strong>K멤버쉽 일반</strong>
<em>영화 1,000원 현장 즉시 할인(1일 4매)</em>
</a>
</li>
</ul>
</div>
</article>
<article class="help_box3">
<h3><em>고객센터</em></h3>
<div class="service">
<ul>
<li>
<a href="#">
<span class="svg1"></span>
<strong>1:1 문의</strong>
</a>
</li>
<li>
<a href="#">
<span class="svg2"></span>
<strong>단체관람</strong>
</a>
</li>
<li>
<a href="#">
<span class="svg3"></span>
<strong>자주묻는 질문</strong>
</a>
</li>
<li>
<a href="#">
<span class="svg4"></span>
<strong>분실물 문의</strong>
</a>
</li>
</ul>
</div>
</article>
</div>
</div>
</div>
</section>
<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-0000</em></a>
</div>
</div>
</div>
</div>
<div id="footer_infor">
<div class="container">
<div class="row">
<div class="footer_infor">
<h2><img src="./image/logo.png" alt="하이시네마 푸터로고"></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>서울특별시 구로구 경인로 557 삼영빌딩 4층 하이시네마<br>
<span>대표: 김하이</span>
</p>
<p>CopyRight 2023 by 하이시네마 All right reserved</p>
<p>본 웹페이지는 상업용이 아닌 포트폴리오로만 사용하기위해 제작하였습니다.</p>
</address>
</div>
</div>
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script>
//tabmenu
const tabMenu = $(".notice");
tabMenu.find("ul > li > ul").hide();
tabMenu.find("li.active>ul").show();
function tabList(e){
e.preventDefault();
let target = $(this);
target.next().show().parents("li").addClass("active").siblings("li").removeClass("active").find(">ul").hide();
}
tabMenu.find("ul>li>a").click(tabList);
//영화차트 스와이퍼
let swiper = new Swiper('.swiper2', {
//화면상에 보여지는 swiper-slide 갯수
slidesPerView: 4,
//슬라이드와 슬라이드 사이 간격
spaceBetween: 10,
// swiper 초기화
observeParents: true,
observer: true,
// Responsive breakpoints >> 반응형
breakpoints: {
// when window width is >= 10px
10: {
slidesPerView: 1.4,
spaceBetween: 20
},
// when window width is >= 600px
600: {
slidesPerView: 2,
spaceBetween: 20
},
// when window width is >= 960px
960: {
slidesPerView: 3,
spaceBetween: 24
},
// when window width is >= 1024px
1024: {
slidesPerView: 4,
spaceBetween: 24
},
}
});
//영화차트 탭메뉴
const mBtn = $(".movie_title > ul > li");
const mCont = $(".movie_chart > div");
mCont.hide().eq(0).show();
mBtn.click(function (e) {
e.preventDefault();
let target = $(this);
let index = target.index();
mBtn.removeClass("active");
target.addClass("active");
mCont.hide().eq(index).show();
});
swiper = new Swiper('.swiper', {
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
mousewheel: true,
scrollbar: {
el: '.swiper-scrollbar',
},
keyboard: {
enabled: true,
},
// autoplay: {
// delay: 2500,
// },
// swiper 초기화
observeParents: true,
observer: true,
});
</script>
</body>
</html><style.css>
@charset "utf-8";
#header{
width: 100%;
border-bottom: 1px solid #c6c6c6;
}
#mNav{
position: absolute;
top: 10px;
right: 14px;
display: none;
}
#banner{
/* banner_menu의 기준점 */
position: relative;
}
#movie{}
#opening{
background: url(../image/bg01.jpg) no-repeat center top;
background-size: cover;
/* padding: 50px 0; */
}
#new{}
#help{}
#footer{background-color: #211f1f;}
.container{
width: 1280px;
margin: 0 auto;
position: relative;
/* background-color: rgba(0, 0, 0, 0.1); */
}
.row{
padding: 0 28px;
}
/* 모바일 네비게이션 편집 */
.ham{
display: block;
width: 25px;
height: 10px;
/* background-color: rgba(0, 0, 0, 0.3); */
padding: 15px 10px 10px 10px;
}
.ham span{
display: block;
width: 25px;
height: 4px;
background-color: #30106a;
position: relative;
}
.ham span::before,.ham span::after{
content: "";
width: 25px;
height: 4px;
background-color: #30106a;
position: absolute;
left: 0;
top: 8px;
}
.ham span::after{
top: -8px;
}
/* header */
.header{}
.header .logo{
float: left;
}
.header .logo a{}
/* 하이시네마 */
.header .logo a em{
padding: 15px 8px 5px 0;
display: inline-block;
}
.header .logo a em img{
/* 너비값만 넣어주어 비율 맞게 들어가게한다. */
width: 155px;
}
/* 하이미디어영화관 */
.header .logo a strong{
display: block;
/* container에 기준점이 있음 */
position: absolute;
left: 194px;
top: 24px;
}
.header .logo a 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: 20px 10px;
font-weight: 700;
font-size: 17px;
color: #444;
}
/* banner_menu */
.banner_menu{
position: absolute;
left: 0;
width: 100%;
top: 20px;
z-index: 10;
}
.banner_menu a{
color: #fff;
font-size: 16px;
transition: all 0.3s;
}
.banner_menu a:hover{
color: #000;
}
/* 왼쪽 정렬 */
.banner_menu .bm_left{
float: left;
}
.banner_menu .bm_left ul{
margin-top: 7px;
}
.banner_menu .bm_left ul li{
/* 옆으로 나열 */
display: inline;
}
.banner_menu .bm_left ul li.total{
margin-right: 20px;
}
.banner_menu .bm_left ul li.total a{
border: 1px solid #fff;
}
.banner_menu .bm_left ul li.total a:hover{
background-color: #fff;
color: #000;
}
.banner_menu ul li.line{
margin-right: 30px;
position: relative;
}
.banner_menu ul li.line::after{
position: absolute;
content: "";
right: -18px;
top: 0;
width: 1px;
height: 16px;
background-color: #fff;
}
.banner_menu .bm_left ul li a{
display: inline-block;
padding: 3px 10px;
}
/* 오른쪽 정렬 */
.banner_menu .bm_right{
float: right;
}
.banner_menu .bm_right ul{
float: left;
}
.banner_menu .bm_right ul:first-child{
margin-top: 10px;
}
.banner_menu .bm_right ul li{
float: left;
margin-right: 30px;
}
.banner_menu .bm_right ul li.line::after{
top: 6px;
}
/* .banner_menu .bm_right ul li.line{
margin-right: 30px;
position: relative;
}
.banner_menu .bm_right ul li.line::after{
content: "";
position: absolute;
width: 1px;
height: 16px;
top: 3px;
right: -9px;
background-color: #fff;
} */
.banner_menu .bm_right ul li.white{}
.banner_menu .bm_right ul li.white a{
display: inline-block;
width: 80px;
background-color: #fff;
color: #3a0e6a;
padding: 7px 30px;
border: 1px solid #30106a;
text-align: center;
}
.banner_menu .bm_right ul li.purple{}
.banner_menu .bm_right ul li.purple a{
display: inline-block;
background-color: #30106a;
padding: 7px 30px;
width: 80px;
text-align: center;
border: 1px solid #6e40c4;
}
.banner_menu a{
color: #fff;
font-size: 16px;
transition: all 0.3s;
}
.banner_menu a:hover{
color: #c1c1c1;
}
.slider{
width: 100%;
/* background-color: #ccc; */
}
.slider .swiper-slide{
height: 400px;
}
.slider img{
width: 100%;
}
.slider .s1{
background: url(../image/banner2.jpg) center center;
background-size: cover;
}
.slider .s2{
background: url(../image/banner3.png) center center;
background-size: cover;
}
.slider .s3{
background: url(../image/banner4.png) center center;
background-size: cover;
}
.swiper-button-prev, .swiper-button-next{
color: #fff;
text-shadow: 1px 1px 2px #222;
}
.swiper-pagination-bullet{
width: 11px;
height: 11px;
background-color: #fff;
margin-right: 20px;
}
.slider .swiper-slide h3{
position: relative;
display: inline-block;
font-size: 62px;
top: 150px;
font-weight: bold;
color: #fff;
left: 60px;
text-shadow: 3px 3px 5px #333;
}
.slider .swiper-slide h3::after{
content: "";
width: 100%;
height: 1px;
background-color: #fff;
position: absolute;
bottom: 5px;
left: 2px;
}
.slider .swiper-slide p{
font-size: 27px;
color: #fff;
/* container가 기준점 */
position: absolute;
left: 60px;
top: 240px;
font-weight: bold;
text-shadow: 1px 1px 3px #333;
}
/* .movie */
.movie{
padding: 100px 0;
}
.movie .movie_title{
margin-bottom: 60px;
}
.movie .movie_title ul{
margin: 0 auto;
width: 900px;
}
.movie .movie_title ul li{
float: left;
width: 210px;
text-align: center;
border: 1px solid #c4c4c4;
/* border 겹치는 부분 삭제 */
margin-right: -1px;
}
.movie .movie_title ul li a{
display: block;
padding: 15px 0;
font-size: 18px;
color: #666;
font-weight: 700;
}
.movie .movie_title ul li.active{}
.movie .movie_title ul li.active a{
background-color: #666;
color: #fff;
}
/* .movie_chart */
.movie_chart{
/* 자식태그에서 float해서 hidden 적용 */
overflow: hidden;
}
.movie_chart > .chart1{}
.movie_chart > .chart1 > div{}
.movie_chart > .chart1 > div > div{}
.movie_chart > .chart1 > div > div > div{}
.movie_chart > .chart1 > div > div > div > .poster{
position: relative;
}
.movie_chart > .chart1 > div > div > div > .poster img{width: 100%;}
/* 포스터를 기준으로 rank가 움지역야함 */
.movie_chart > .chart1 > div > div > div > .poster .rank{
position: absolute;
top: 17px;
left: 0;
width: 50px;
height: 50px;
background-color: #6e40c4;
text-align: center;
line-height: 50px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}
.movie_chart > .chart1 > div > div > div > .poster .rank strong{
font-size: 20px;
color: #fff;
}
.movie_chart > .chart1 > div > div > div > .poster .mx{
position: absolute;
top: 17px;
right: 0;
}
.movie_chart > .chart1 > div > div > div > .poster .mx span{
display: block;
width: 103px;
height: 25px;
}
.movie_chart > .chart1 > div > div > div > .poster .mx span.m{
background-position: 0 -75px;
}
.movie_chart > .chart1 > div > div > div > .poster .mx span.b{
background-position: 0 -100px;
}
/* .info */
.movie_chart > .chart1 > div > div > div > .info{
border: 1px solid #ccc;
background-color: #fff;
padding: 17px;
}
.movie_chart > .chart1 > div > div > div > .info h3{
font-size: 26px;
color: #333;
font-weight: bold;
margin-bottom: 20px;
}
.movie_chart > .chart1 > div > div > div > .info h3 strong{}
.movie_chart > .chart1 > div > div > div > .info h3 span{
display: inline-block;
width: 29px;
height: 29px;
vertical-align: -5px;
}
/* 관람가 이미지_ icon */
.movie_chart > .chart1 > div > div > div > .info h3 span.all{
background-position: -87px -125px;
}
.movie_chart > .chart1 > div > div > div > .info h3 span.a12{
background-position: 0px -125px;
}
.movie_chart > .chart1 > div > div > div > .info h3 span.a15{
background-position: -29px -125px;
}
.movie_chart > .chart1 > div > div > div > .info h3 span.a19{
background-position: -59px -125px;
}
/* .info_btn */
.movie_chart > .chart1 > div > div > div > .info .info_btn{
overflow: hidden;
}
.movie_chart > .chart1 > div > div > div > .info .info_btn a{
float: left;
display: block;
width: 49%;
height: 50px;
background-color: #ccc;
display: flex;
justify-content: center;
align-items: center;
margin-right: 2%;
font-size: 16px;
font-weight: bold;
}
.movie_chart > .chart1 > div > div > div > .info .info_btn a:last-child{
margin-right: 0;
}
.swiper2 .swiper-button-prev,.swiper2 .swiper-button-next{
display: none;
}
/* movie_chart2 */
.movie_chart > .chart2{
overflow: hidden;
}
.movie_chart > .chart2 > div{}
.movie_chart > .chart2 > div > div{}
.movie_chart > .chart2 > div > div > div{}
.movie_chart > .chart2 > div > div > div .poster{
position: relative;
}
.movie_chart > .chart2 > div > div > div .poster img{
width: 100%;
}
.movie_chart > .chart2 > div > div > div .poster .rank{
position: absolute;
background-color: #6e40c4;
width: 50px;
height: 50px;
left: 0;
top: 17px;
text-align: center;
line-height: 50px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}
.movie_chart > .chart2 > div > div > div .poster .rank strong{
color: #fff;
font-size: 20px;
}
.movie_chart > .chart2 > div > div > div .mx{
position: absolute;
right: 0;
top: 17px;
}
.movie_chart > .chart2 > div > div > div .mx span{
display: block;
width: 103px;
height: 25px;
}
.movie_chart > .chart2 > div > div > div .mx .m{
background-position: 0px -75px;
}
.movie_chart > .chart2 > div > div > div .mx .b{
background-position: 0 -100px;
}
.movie_chart > .chart2 > div > div > div .info{
border: 1px solid #ccc;
padding: 17px;
}
.movie_chart > .chart2 > div > div > div .info h3{
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
color: #333;
}
.movie_chart > .chart2 > div > div > div > .info h3 span{
display: inline-block;
width: 29px;
height: 29px;
vertical-align: -5px;
}
.movie_chart > .chart2 > div > div > div > .info h3 span.all{
background-position: -87px -125px;
}
.movie_chart > .chart2 > div > div > div > .info h3 span.a12{
background-position: 0px -125px;
}
.movie_chart > .chart2 > div > div > div > .info h3 span.a15{
background-position: -29px -125px;
}
.movie_chart > .chart2 > div > div > div > .info h3 span.a19{
background-position: -59px -125px;
}
.movie_chart > .chart2 > div > div > div > .info h3 span strong{}
.movie_chart > .chart2 > div > div > div .info .info_btn{
overflow: hidden;
}
.movie_chart > .chart2 > div > div > div .info .info_btn a{
float: left;
display: block;
background-color: #ccc;
width: 49%;
height: 50px;
margin-right: 10px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 2%;
font-size: 16px;
font-weight: bold;
}
.movie_chart > .chart2 > div > div > div .info_btn a:last-child{
margin-right: 0;
}
.swiper .swiper-scrollbar-drag{background-color: #fff;}
/* event */
.event{
overflow: hidden;
padding-bottom: 100px;
}
.event h2{
font-size: 30px;
font-weight: bold;
margin-bottom: 20px;
}
.event img{width: 100%; display: block;}
.event .event_left{
overflow: hidden;
float: left;
width: 66%;
margin-right: 2%;
}
.event .event_left .event_slide{
width: 100%;
float: left;
}
.event .event_left .event_box1{
float: left;
width: 50%;
}
.event .event_left .event_box2{
float: left;
width: 50%;
}
.event .event_left .event_slide img{}
.event .event_right{
width: 32%;
float: right;
margin-right: 0;
}
/* opening */
.opening{
padding: 100px;
text-align: center;
color: #bb9b51;
}
.opening h2{
margin-bottom: 15px;
display: flex;
justify-content: center;
align-items: center;
}
.opening h2 .grand{
width: 330px;
height: 50px;
display: block;
background-position: 0 -176px;
}
.opening .date{
width: 310px;
height: 36px;
display: inline-block;
background-position: 0 -226px;
}
.opening .desc{
font-size: 35px;
font-weight: 400;
background: url(../image/bar.png) no-repeat bottom center;
background-size: 100%;
margin-bottom: 20px;
padding-bottom: 20px;
}
.opening .open_box{
padding: 20px -3% 0 3%;
overflow: hidden;
}
.opening .open_box > div{
width: 27.33%;
margin: 4% 3% 0 3%;
float: left;
box-sizing: border-box;
background-color: rgba(0, 0, 0, 0.5);
border: 1px solid #3e4b44;
}
.opening .open_box > div h3{
color: #fff;
border: 1px solid #6e3abb;
margin-top: -24px;
font-size: 19px;
padding: 10px 20px;
background-color: #551e9b;
/* inline-block 글씨 있는 칸만 채워진다. */
display: inline-block;
}
.opening .open_box > div p{
font-size: 17px;
color: #fff;
font-weight: 300;
padding: 6% 0 10% 0;
}
.opening .open_box > div p em{
display: block;
}
.opening .open_box > div p strong{
display: block;
font-weight: bold;
text-shadow: 0 0 20px #fff;
}
/* new */
.new{
padding: 100px 0;
position: relative;
}
.new h2{
font-size: 30px;
font-weight: bold;
margin-bottom: 20px;
}
.new .new_left{
/* width: 100%; */
height: 500px;
background-color: #ccc;
margin-right: 420px;
/* 영상크기 넘쳤을 때 보이지 않게해주기 */
overflow: hidden;
background-size: cover;
}
.new .new_right{
width: 400px;
height: 500px;
background-color: #f0f0f0;
/* position으로 옆으로 띄워주기 */
position: absolute;
right: 0;
top: 165px;
padding: 34px;
/* border와 padding 값이 합쳐서 width 400px가 됨 */
box-sizing: border-box;
}
.new .new_right .title{
font-size: 28px;
color: #000;
}
.new .new_right .title span{
font-size: 20px;
}
.new .new_right .release{
font-size: 15px;
color: #333;
}
.new .new_right .star{
padding: 13px 0;
}
.new .new_right .star span{
display: inline-block;
/* 별 이미지 사이즈 */
width: 20px;
height: 20px;
vertical-align: -3px;
}
.new .new_right .star1{
background-position: -394px 0 ;
}
.new .new_right .star2{
background-position: -413px 0 ;
}
.new .new_right .star0{
background-position: -375px 0 ;
}
.new .new_right .star strong{
font-size: 18px;
margin-left: 10px;
}
.new .new_right .summary{
font-size: 14px;
}
.new .new_right .summary .genre{
padding-bottom: 3px;
}
.new .new_right .summary .age{
padding-bottom: 10px;
}
.new .new_right .summary .desc{
/* 양쪽정렬 */
text-align: justify;
height: 108px;
overflow: hidden;
margin-bottom: 20px;
}
.new .new_right .select{
overflow: hidden;
}
.new .new_right .select .s1{
width: 49%;
float: left;
margin-right: 2%;
}
.new .new_right .select .s2{
width: 49%;
float: left;
}
.new .new_right .select .s3{
width: 100%;
float: left;
margin-top: 2%;
}
.new .new_right .s1 .ui_select1, .new .new_right .s2 .ui_select2{
width: 100%;
background-color: #2c2f34;
color: #fff;
height: 36px;
display: inline-block;
margin: 0;
/* 글자 정렬 */
text-align: left;
/* padding을 주면 안쪽 여백이 생김 */
padding: 0 10px;
box-sizing: border-box;
border: 0;
outline: none;
}
.new .new_right .s3 .ui_input{
background-color: #2c2f34;
color: #fff;
width: 100%;
height: 36px;
padding: 0 10px;
outline: none;
border: 0;
}
.new .new_right .btn{
margin-top: 2%;
/* background-color: #30106a; */
overflow: hidden;
}
.new .new_right .btn a{
margin-top: 10px;
display: inline-block;
text-align: center;
width: 49%;
float: left;
padding: 10px 0;
}
.new .new_right .btn a.white{
background-color: #fff;
border: 1px solid #6e3abb;
font-size: 18px;
color: #6e3abb;
margin-right: 2%;
font-weight: bold;
box-sizing: border-box;
}
.new .new_right .btn a.purple{
background-color: #3a0e6a;
border: 1px solid #6e3abb;
font-size: 18px;
color: #fff;
font-weight: bold;
margin-right: 0;
box-sizing: border-box;
}
/* help */
.help{
padding-bottom: 100px;
}
.help article{
width: 32%;
margin-right: 2%;
float: left;
}
.help .help_box3{
margin-right: 0;
}
.help article > h3{
font-size: 30px;
font-weight: bold;
margin-bottom: 20px;
}
.help article > div{
border: 1px solid #dbdbdb;
height: 350px;
}
/* 고객센터 border 없애기 */
.help .help_box3 > div{
border: 0;
}
/* notice */
.help .notice{
/* .notice ul의 기준점 */
position: relative;
padding: 17px;
box-sizing: border-box;
}
.help .notice ul{
overflow: hidden;
}
.help .notice ul li{
float: left;
}
.help .notice ul li.active{}
.help .notice ul li.active a{
background-color: red;
color: #fff;
}
.help .notice ul li a{
display: block;
width: 100px;
background-color: #f5f5f5;
border: 1px solid #dbdbdb;
padding: 10px 0;
text-align: center;
font-size: 15px;
font-weight: bold;
margin-right: -1px;
}
.help .notice ul li ul{
position: absolute;
top: 80px;
left: 17px;
width: 90%;
margin-right: 17px;
box-sizing: border-box;
}
.help .notice ul li ul li{
/* .notice ul li에서 float을 띄워서 같이 적용되었다. float해제 */
float: none;
width: 100%;
padding: 15px;
border-bottom: 1px solid #dbdbdb;
}
.help .notice ul li ul li dl{}
.help .notice ul li ul li dl dt{}
.help .notice ul li ul li dl dd{
color: #333;
padding-top: 3px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 80%;
}
.help .card{
padding: 17px;
box-sizing: border-box;
}
.help .card ul{}
.help .card ul li{
border: 1px solid #dbdbdb;
padding: 10px;
box-sizing: border-box;
height: 95px;
position: relative;
margin-bottom: 15px;
}
.help .card ul li span{
position: absolute;
top: 10px;
left: 10px;
}
.help .card ul li span img{
width: 115px;
}
.help .card ul li strong{
padding-left: 125px;
display: block;
margin-top: 7px;
}
.help .card ul li em{
padding-left: 125px;
display: block;
font-size: 12px;
}
.help .service{}
.help .service ul{
overflow: hidden;
}
.help .service ul li{
width: 50%;
height: 175px;
border: 1px solid #dbdbdb;
box-sizing: border-box;
float: left;
}
.help .service ul li a{}
.help .service ul li a span{
display: block;
/* width: 105px; */
height: 90px;
/* 상20px 좌우 auto 하10px */
margin: 20px auto;
background-color: #ccc;
background: url(../image/KakaoTalk_20230706_141256154.png);
}
.help .service ul li a span.svg1{width: 99px; background-position: 0 -280px;}
.help .service ul li a span.svg2{width: 106px; background-position: -99px -280px;}
.help .service ul li a span.svg3{width: 97px; background-position: -203px -280px;}
.help .service ul li a span.svg4{width: 97px; background-position: -300px -280px;}
.help .service ul li a strong{
font-size: 14px;
display: block;
text-align: center;
}
/* 중복되는 border 선지우기 */
.help .service ul li:nth-of-type(1){
border-right: 0;
border-bottom: 0;
}
.help .service ul li:nth-of-type(2){
border-bottom: 0;
}
.help .service ul li:nth-of-type(3){
border-right: 0;
}
/* footer_sns */
.footer_sns{
position: absolute;
top: 30px;
right: 20px;
z-index: 1;
}
.footer_sns ul{}
.footer_sns ul li{
display: inline-block;
width: 36px;
height: 36px;
margin-right: 4px;
}
.footer_sns ul li a{}
.footer_sns ul li.s1{background-position: 0px -375px;}
.footer_sns ul li.s2{background-position: -36px -375px;}
.footer_sns ul li.s3{background-position: -72px -375px;}
.footer_sns ul li.s4{background-position: -108px -375px;}
.footer_sns ul li.s5{background-position: -144px -375px;}
.footer_sns ul li.s1:hover{background-position: 0px -411px;}
.footer_sns ul li.s2:hover{background-position: -36px -411px;}
.footer_sns ul li.s3:hover{background-position: -72px -411px;}
.footer_sns ul li.s4:hover{background-position: -108px -411px;}
.footer_sns ul li.s5:hover{background-position: -144px -411px;}
.footer_sns .tel{
padding-top: 20px;
}
.footer_sns .tel a{
font-size: 24px;
color: #888;
}
.footer_sns .tel a em{
color: #fff;
}
#footer_infor a{
color: #fff;
}
.footer_infor{
color: #fff;
width: 80%;
padding: 50px 0;
}
.footer_infor h2 img{
width: 150px;
}
.footer_infor ul{
padding: 15px 0;
}
.footer_infor ul li{
display: inline;
margin-right: 16px;
position: relative;
}
.footer_infor ul li:nth-child(1)::after{
width: 0;
}
.footer_infor ul li::after{
content: "";
position: absolute;
top: 2px;
left: -8px;
width: 1px;
height: 10px;
background-color: #fff;
}
.footer_infor ul li a{}
.footer_infor address p{
padding-bottom: 15px;
}<reset.css>
@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);
.nanumgothic * {
font-family: 'Nanum Gothic', sans-serif;
}
/* 여백 초기화 */
body,div,ul,li,dl,dt,ol,h1,h2,h3,h4,h5,h6,input,fieldset,legend,p,select,table,
th,td,tr,textarea,button,form,figure,figcaption,dd{margin: 0; padding: 0;}
/* a 링크 초기화 */
a {color: #222; text-decoration: none;}
a:hover {color: #390;}
/* 폰트 초기화 */
body, input, textarea, select, button, table {
font-family:'Nanum Gothic',AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;
color: #222; font-size: 13px; line-height: 1.5;}
/* 폰트 스타일 초기화 */
em,address {font-style: normal;}
/* 블릿기호 초기화 */
dl,ul,li,ol,menu {list-style: none;}
/* 제목 태그 초기화 */
h1,h2,h3,h4,h5,h6 {font-size: 13px; color:#222; font-weight: normal;}
/* 테두리 초기화 */
img,fieldset {border:0 none;}
/* 버튼 초기화 */
button {border:0;}
/* IR 효과 */
.ir_pm {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;} /* 의미있는 이미지의 대체 텍스트를 제공하는 경우 */
.ir_wa {display: block; overflow: hidden; position: relative; z-index: -1; width: 100%; height: 100%;} /* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고하 할 때 */
.ir_su {overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px;} /* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */
/* margin, padding */
.mt10 {margin-top: 10px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}
.mt25 {margin-top: 25px !important;}
.mt30 {margin-top: 30px !important;}
.mt35 {margin-top: 35px !important;}
.mt40 {margin-top: 40px !important;}
.mt45 {margin-top: 45px !important;}
.mt50 {margin-top: 50px !important;}
.clearfix::before,.clearfix::after{
content: "";
display: block;
clear: both;
}
.icon{
background: url(../image/KakaoTalk_20230706_141256154.png);
}
.icon2{
background: url(../image/icon2.png);
}
img{
display: block;
}<media.css>
@charset "utf-8";
@media(max-width:1290px){
.container{
width: 100%;
}
/* header */
.header .nav ul li{width: 93px;}
/* banner */
.slider .swiper-slide h3{font-size: 62px;}
.slider .swiper-slide p{font-size: 27px;}
}
@media(max-width:1060px){
/* banner */
.banner_menu .bm_right ul:first-child{display: none;}
}
/* 노트북 */
@media(max-width:1024px){
.row{padding: 0 24px;}
/* header */
.header .nav{display: none;}
#mNav{display: block;}
/* banner */
.slider .swiper-slide h3{font-size: 50px;}
.slider .swiper-slide p{font-size: 24px; top:200px}
/* help */
.help article{width: 49%; margin-right: 2%;}
.help .help_box2{margin-right: 0;}
.help .help_box3{width: 100%;}
.help .help_box3 h3{
display: block;
overflow: hidden;
font-size: 0;
line-height: 0;
text-indent: -9999px;
}
.help .help_box3 >div{
border: 1px solid #dbdbdb;
height: auto;
}
.help .service ul li{
border: 0;
width: 25%;
height: auto;
padding-bottom: 20px;
}
}
@media(max-width:960px){
/* header */
/* 로고 가운데 정렬하기 > float 해제 */
.header .logo{float: none; text-align: center; width: 100%;}
.header .logo a strong{left: 15px;}
/* banner */
.banner_menu .bm_left ul li.line{display: none;}
.banner_menu .bm_left ul li:nth-of-type(3){display: none;}
.slider .swiper-slide h3{font-size: 38px; top:165px}
.slider .swiper-slide p{font-size: 20px; top:220px;}
/* movie */
.movie .movie_title ul{width: auto;}
.movie .movie_title ul li{width: 25%; box-sizing: border-box; }
/* opening */
.opening .open_box{display: none;}
.opening .desc{font-size: 25px;}
/* new */
.new{padding: 50px 0;}
.new .new_left{margin-right: 0;height: 400px;}
.new .new_right{
height: auto;
position: relative;
width: 100%;
top: 0;
}
/* footer */
.footer_sns{
position: static;
text-align: center;
background-color: #352c2c;
padding-bottom: 15px;
}
.footer_sns .tel{display: none;}
.footer_infor{text-align: center; width: 100%;}
.footer_infor img{display: inline;}
}
/* 태블릿 */
@media(max-width:768px){
body{background-color: #d9d7e0;}
#header{background-color: #fff;}
.row{padding: 0 16px;}
#movie .row{
background-color: #fff;
margin: 24px;
padding: 24px;
}
#movie .ir_su{
/* position의 기본(해제) */
position: static;
width: auto;
height: auto;
line-height: normal;
text-indent: 0px;
font-size: 24px;
font-weight: bold;
padding-bottom: 24px;
}
.movie{
/* .movie의 패딩값을 없애주면 위아래 여백이 없어진다. */
padding: 0;
}
.movie .movie_title{
margin-bottom: 30px;
}
.movie .movie_title ul{
position: relative;
padding-bottom: 10px;
}
.movie .movie_title ul::before{
content: "";
width: 100%;
height: 1px;
background-color: #aaa;
position: absolute;
left: 0;
bottom: 0;
}
.movie .movie_title ul li{
width: auto;
border: 0;
}
.movie .movie_title ul li a{
padding: 0;
/* font-size: 18px;
color: #666; */
font-weight: 400;
margin-right: 35px;
}
.movie .movie_title ul li.active a{
background-color: #fff;
color: #666;
}
.movie .movie_title ul li.active{
position: relative;
}
.movie .movie_title ul li.active::after{
content: "";
position: absolute;
width: 100%;
height: 3px;
background-color: #333;
transition: all 0.3s;
left: 0;
bottom: -10px;
}
/* event */
#event .row{
padding: 0 24px 24px 24px;
}
.event{
background-color: #fff;
padding: 24px;
}
.event .event_left{width: 100%;}
.event .event_right{display: none;}
.event h2{font-size: 24px;}
/* opening */
.opening{padding: 24px;}
.opening .desc{font-size: 20px;}
/* new */
.new{padding: 24px; margin: 24px 8px; background-color: #fff;}
.new h2{font-size: 24px; margin-bottom: 10px;}
.new .new_right .title{font-size: 24px;}
.new .new_right .title span{font-size: 24px;}
/* help */
#help .row{
background-color: #fff;
margin: 24px;
padding: 24px;
}
.help{padding: 0;}
.help article{width: 100%; margin-right: 0; margin-bottom: 2%;}
.help article > h3{
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.help .help_box3 h3{
display: block;
font-size: auto;
line-height: normal;
text-indent: 0px;
font-weight: bold;
}
}
/* 모바일폰 */
@media(max-width:600px){
/* header */
.header .logo{float: none; text-align: left; width: 100%;}
.header .logo a strong{display: none;}
/* banner */
.banner_menu .bm_right ul li.white a{padding: 3px 15px;}
.banner_menu .bm_right ul li.purple a{padding: 3px 15px;}
.slider .swiper-slide h3{font-size: 38px; top:165px}
.slider .swiper-slide p{font-size: 20px; top:220px;}
/* movie */
#movie .row{background-color: #fff; margin: 16px; padding: 16px;}
#movie .ir_su{font-size: 18px; padding-bottom: 16px;}
.movie .movie_title{margin-bottom: 20px;}
.movie .movie_title ul{padding-bottom: 3px;}
.movie .movie_title ul li a{font-size: 14px;margin-right: 15px;}
.movie .movie_title ul li.active::after{bottom: -3px; width: 90%; height: 2px;}
/* event */
#event .row{padding: 0 16px 16px 16px;}
.event{padding: 16px;}
.event h2{font-size: 18px; margin-bottom: 16px;}
/* opening */
.opening .desc{font-size: 18px;}
.opening .date{display: none;}
/* new */
.new{padding: 16px; margin: 16px 0px; background-color: #fff;}
.new h2{font-size: 18px; margin-bottom: 10px;}
.new .new_right .title{font-size: 16px;}
.new .new_right .title span{font-size: 16px;}
/* help */
#help .row{
background-color: #fff;
margin: 16px;
padding: 16px;
}
.help .service ul li{
width: 50%;
height: auto;
border: 1px solid #dbdbdb;
}
.help .help_box3 >div{
border: 0;
}
.help .service ul li:nth-of-type(1){
border-right: 0;
border-bottom: 0;
}
.help .service ul li:nth-of-type(2){
border-bottom: 0;
}
.help .service ul li:nth-of-type(3){
border-right: 0;
}
/* footer */
.footer_infor{padding: 20px 0;}
.footer_infor p span{display: none;}
}
@media(max-width:480px){}
@media(max-width:360px){}<완성>
728x90
반응형
'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| [JAVA]JAVA 자료형 (0) | 2023.07.12 |
|---|---|
| 비주얼 스튜디오 코드_75 animation (1) | 2023.07.12 |
| 비주얼 스튜디오 코드 73_animation 화면이 움직이면 글자가 바운딩해서 나타남 (0) | 2023.07.11 |
| 비주얼 스튜디오 코드 72_parallax08 (0) | 2023.07.11 |
| 비주얼 스튜디오 코드 71_하이시네마_컨텐츠(유투브 영상 삽입) (0) | 2023.07.10 |