반응형
https://www.melon.com/event/ticket/index.htm?gubunId=&keyword=&pageIndex=0
멜론과 멜론티켓의 꿀케미 혜택! 멜론 GOLD이상 누구나! 멜론티켓 예매수수료 무료!
음악이 필요한 순간, 멜론
www.melon.com
<!-- event wrap -->
<div class="wrap_container">
<style>
.nocharge{text-align:center;min-width:1008px;margin:0 auto}
.nocharge img{vertical-align:top}
.nocharge .hidden_element{position:absolute;top:0;left:-9999em;font-size:0;line-height:0;opacity:0;visibility:hidden;pointer-events:none}
.nocharge .container{width:620px;margin:0 auto}
.nocharge .section{background-repeat:no-repeat;background-position:50% 0}
.nocharge .ellipsis{overflow:hidden;display:block;text-overflow:ellipsis;white-space:nowrap}
.nocharge .visual{height:1903px;background-image:url('//cdnimg.melon.co.kr/resource/image/cds/event/web/201908/ticket/visual_bg.jpg');background-color:#fffbeb}
.ticket_list{padding:80px 0 55px;background-image:url('//cdnimg.melon.co.kr/resource/image/cds/event/web/201908/ticket/ticket_list_bg.jpg');background-color:#fff0ba}
.wrap_main_concert{width:1008px;margin:0 auto 37px}.wrap_main_concert .list_main_concert{display:block;overflow:hidden;width:100%}
.wrap_main_concert .list_main_concert li{float:left;margin-left:29px;background:#fffbeb;margin-top:30px}
.wrap_main_concert .list_main_concert li.first{margin-left:0;padding-right:1px}
.wrap_main_concert .list_main_concert .inner{display:block;width:180px;height:358px;padding:24px 24px 21px;border:1px solid #eee0ae;text-align:left}
.wrap_main_concert .list_main_concert .inner:hover{text-decoration:none}
.wrap_main_concert .list_main_concert .thumb{display:block;position:relative;width:180px;height:250px;overflow:hidden}
.wrap_main_concert .list_main_concert .thumb img{width:180px}
.wrap_main_concert .list_main_concert .thumb .frame{display:block;position:absolute;top:0;left:0;width:178px;height:248px;background:0 0;z-index:10;border:1px solid #000;opacity:.03}
.wrap_main_concert .list_main_concert .inner:hover .thumb .frame{background-position:-820px -230px}
.wrap_main_concert .list_main_concert .tit{display:block;overflow:hidden;height:20px;padding:13px 0 9px;font-size:16px;line-height:20px;color:#333;text-overflow:ellipsis;white-space:nowrap}
.wrap_main_concert .list_main_concert .inner:hover .tit{color:#000}
.wrap_main_concert .list_main_concert .inner:hover .day{color:#000}
.wrap_main_concert .list_main_concert .inner:hover .location{color:#000}
.wrap_main_concert .list_main_concert .day{display:block;overflow:hidden;height:18px;font-weight:400;font-size:14px;line-height:18px;color:#666;text-overflow:ellipsis;white-space:nowrap}
.wrap_main_concert .list_main_concert .location{display:block;overflow:hidden;height:20px;font-weight:400;font-size:13px;line-height:20px;color:#888;text-overflow:ellipsis;white-space:nowrap}
.wrap_main_concert .list_main_concert .stat{display:block;overflow:hidden;height:20px;padding-top:8px;font-weight:400;font-size:16px;line-height:20px;color:#00cd3c;text-overflow:ellipsis;white-space:nowrap}
.nocharge .sns{padding:46px 0 47px;background-color:#1ccc4b}
.nocharge .sns ul{margin-top:35px;font-size:0;line-height:0}
.nocharge .sns ul li{display:inline-block;margin:0 16px;zoom:1}
.nocharge .notice{padding:70px 0 50px;background:#fff;}
.nocharge .notice h3{margin-bottom:40px;font-size:27px;color:#393939;line-height:1.2;letter-spacing:-1.5px;font-weight:600}
.nocharge .notice .container{margin:67px auto 0;width:1008px;border-top:solid 1px #ccc;padding-top:32px;text-align:left;}
.nocharge .notice ul li{position:relative;margin-top:15px;padding-left:14px;font-size:16.5px;color:#666;line-height:1.2;letter-spacing:-1px}
.nocharge .notice ul li:before{content:'';position:absolute;top:7px;left:0;width:3px;height:3px;background:#393939;border-radius:100px;opacity:.4}
.nocharge .notice .italic{font-style:italic}
</style>
<div class="event_view nocharge">
<div class="section visual">
<div class="hidden_element">
<h3>멜론 VIP 혜택관</h3>
<h2>오직 멜론 VIP만을 위한 특별한 문화 혜택 Melon x Melon 티켓 MVG</h2>
<h1>멜론과 멜론티켓의 슈퍼꿀케미파워!</h1>
<p>멜론 GOLD 이상, 누구나! 예매 횟수 제한없이, 무제한! 정말 쉬운 방법으로, 간편하게!</p>
<p>멜론 티켓 수수료 무료 0원</p>
<dl>
<dt>정말 쉬운 헤택받는 방법!</dt>
<dd>보고 싶은 공연을 클릭하면 결제 시 자동으로 수수료 무료 혜택 제공!</dd>
<dd>Tip 아래에서 꿀잼공연 추천해드릴게요~</dd>
</dl>
</div>
</div>
<div class="section ticket_list">
<h2><img src="//cdnimg.melon.co.kr/resource/image/cds/event/web/201908/ticket/ticket_list_title.png" alt="이 공연 괜찮더라구요! 수수료 무료잖아요!" /></h2>
<div class="wrap_main_concert">
<ul class="list_main_concert">
<li class="first">
<a href="javascript:goTicketDetail(204899);" class="inner">
<span class="thumb">
<img src="//cdnticket.melon.co.kr/resource/image/upload/product/2020/05/20200528104334ce28c4f9-534e-45c0-8f1a-e75a7e18abe3.jpg" alt="">
<span class="frame"></span>
</span>
<strong class="tit">뮤지컬 〈모차르트！〉 10주년 기념공연</strong>
<span class="day">2020.06.16 ~ 2020.08.23</span>
<span class="location">세종문화회관 대극장</span>
<span class="stat">10주년 기념공연</span>
</a>
</li>
<li>
<a href="javascript:goTicketDetail(205284);" class="inner">
<span class="thumb">
<img src="//cdnticket.melon.co.kr/resource/image/upload/product/2020/06/202006151136104e52a61a-05ff-4184-b5be-ca015a00be70.jpg" alt="">
<span class="frame"></span>
</span>
<strong class="tit">신비아파트 미디어 어드벤처：내가 구하리！</strong>
<span class="day">2020.06.13 ~ 2020.10.04</span>
<span class="location">서울숲 갤러리아포레 더 서울라이티움 2관</span>
<span class="stat">온가족이 함께!</span>
</a>
</li>
<li>
<a href="javascript:goTicketDetail(204797);" class="inner">
<span class="thumb">
<img src="//cdnticket.melon.co.kr/resource/image/upload/product/2020/07/202007131222391a310cac-256a-4595-b249-18bb46b76b04.jpg" alt="">
<span class="frame"></span>
</span>
<strong class="tit">KB RAPBEAT FESTIVAL 2020</strong>
<span class="day">2020.09.19 ~ 2020.09.20</span>
<span class="location">서울랜드 </span>
<span class="stat">최종 라인업 공개!</span>
</a>
</li>
<li>
<a href="javascript:goTicketDetail(205352);" class="inner">
<span class="thumb">
<img src="//cdnticket.melon.co.kr/resource/image/upload/product/2020/07/20200715110627549f89bb-361a-4089-b997-a5a821f529c2.jpg" alt="">
<span class="frame"></span>
</span>
<strong class="tit">뮤지컬 〈캣츠〉 40주년 내한공연－서울（Musical CATS）</strong>
<span class="day">2020.09.09 ~ 2020.11.08</span>
<span class="location">샤롯데씨어터 </span>
<span class="stat">40주년 내한공연</span>
</a>
</li>
<li class="first">
<a href="javascript:goTicketDetail(205184);" class="inner">
<span class="thumb">
<img src="//cdnticket.melon.co.kr/resource/image/upload/product/2020/07/20200729134733312f04cd-e987-4553-b500-05ac6e93055a.jpg" alt="">
<span class="frame"></span>
</span>
<strong class="tit">뮤지컬 〈제이미〉</strong>
<span class="day">2020.07.04 ~ 2020.09.12</span>
<span class="location">LG아트센터 </span>
<span class="stat">기다려온 아시아 초연</span>
</a>
</li>
<li>
<a href="javascript:goTicketDetail(205212);" class="inner">
<span class="thumb">
<img src="//cdnticket.melon.co.kr/resource/image/upload/product/2020/08/20200803151919d3353b22-fdfb-4050-9855-9009d4dd3a93.jpg" alt="">
<span class="frame"></span>
</span>
<strong class="tit">서울숲재즈페스티벌 2020 공식티켓</strong>
<span class="day">2020.10.09 ~ 2020.10.11</span>
<span class="location">서울숲공원 일대 </span>
<span class="stat">얼리버드 티켓 오픈!</span>
</a>
</li>
<li>
<a href="javascript:goTicketDetail(205355);" class="inner">
<span class="thumb">
<img src="//cdnticket.melon.co.kr/resource/image/upload/product/2020/07/20200720155704c9cda81a-6cc1-46ff-a6b0-f0fa6c345e0f.jpg" alt="">
<span class="frame"></span>
</span>
<strong class="tit">Someday Festival 2020 공식티켓</strong>
<span class="day">2020.09.05 ~ 2020.09.06</span>
<span class="location">서울 난지한강공원 </span>
<span class="stat">라인업 확인하기!</span>
</a>
</li>
<li>
<a href="javascript:goTicketDetail(205322);" class="inner">
<span class="thumb">
<img src="//cdnticket.melon.co.kr/resource/image/upload/product/2020/07/20200702094716e90c13b3-6c0a-418d-b8ff-55a810dbddb5.jpg" alt="">
<span class="frame"></span>
</span>
<strong class="tit">2020 아시아프 ＆ 히든아티스트 페스티벌</strong>
<span class="day">2020.07.21 ~ 2020.08.16</span>
<span class="location">홍익대학교 현대미술관 </span>
<span class="stat">히든아티스트 페스티벌</span>
</a>
</li>
</ul>
</div>
<a href="javascript:goTicket();" class="btn_landing"><img src="//cdnimg.melon.co.kr/resource/image/cds/event/web/201908/ticket/pc_btn_ticket_landing_190903.png" alt="멜론티켓으로 이동하기" /></a>
</div>
<div class="section sns">
<h2><img src="//cdnimg.melon.co.kr/resource/image/cds/event/web/201908/ticket/sns_share_title.png" alt="공연 좀 보는 친구에게 이 소식을 공유해보아요!" /></h2>
<ul>
<li><a href="javascript:shareSns('facebook');"><img src="//cdnimg.melon.co.kr/resource/image/cds/event/web/201908/ticket/sns_btn_facebook03_82x82.png" alt="페이스북 바로가기" /></a></li>
<li><a href="javascript:shareSns('twitter');"><img src="//cdnimg.melon.co.kr/resource/image/cds/event/web/201908/ticket/sns_btn_twitter03_82x82.png" alt="트위터 바로가기" /></a></li>
</ul>
</div>
<div class="section notice">
<a href="/event/vip/index.htm" class=""><img src="//cdnimg.melon.co.kr/resource/image/cds/event/web/201908/ticket/btn_vip_more.png" alt="VIP혜택관 더 보기"></a>
<div class="container">
<h3>이벤트 참여시 꼭 확인하세요!</h3>
<ul>
<li>멜론 GOLD 이상 고객은 멜론 티켓에서 결제 시 "자동으로" 예매수수료 무료 혜택이 적용됩니다.</li>
<li>해당 프로모션은 당사의 운영 정책에 따라 진행되며 내부 사정에 따라 별도의 고지 없이 종료될 수 있습니다.</li>
<li>일부 공연은 예매수수료 무료 대상에서 제외될 수 있습니다.</li>
<li>이벤트 문의: 1899-0042(유료) 및 멜론티켓 앱 내 고객센터 내 1:1 문의 이용해주세요.</li>
<li>매월 1일 회원등급이 조정될 시, 혜택이 적용되지 않을 수 있습니다. 이 경우 다시 예매를 시도해주세요.</li>
<li>마케팅제휴문의: 고객센터 > 나의문의내역 > 1:1문의하기 > 대분류-기타 > 중분류-제휴/프로모션</li>
</ul>
</div>
</div>
</div>
<!--//event_view-->
</div>
<!--//event wrap-->반응형
'Publishing > HTML' 카테고리의 다른 글
| html include/import (0) | 2023.07.24 |
|---|---|
| 사이트 기본 setting (0) | 2020.08.11 |
| 회원가입 폼 (0) | 2020.07.24 |
| HTML5 Canvas (0) | 2020.02.13 |
| HTML5 Video (fullpage Video) (0) | 2020.02.13 |