보관정리함

<div class="figure-html" data-ke-type="html" data-source=" <div class="movieWrap"> <input type="radio" name="cont-open-btn" id="contOpenBtn1" checked> <input type="radio" name="cont-open-btn" id="contOpenBtn2"> <input type="radio" name="cont-open-btn" id="contOpenBtn3"> <input type="radio" name="cont-open-btn" id="contOpenBtn4"> <div class="movie-top"> <div class="title-wrapper"> <div><h2>𝐓𝐇𝐔𝐍𝐃𝐄𝐑</h2><span>title</span></div> <p>앨범 | 세븐틴 (SEVENTEEN) | 2025.05.26.</p> </div> <div class="menu-list"> <label for="contOpenBtn1" class="menu-item">소개</label> <label for="contOpenBtn2" class="menu-item">앨범정보</label> <label for="contOpenBtn3" class="menu-item">아티스트/팬</label> <label for="contOpenBtn4" class="menu-item">💌포토</label> </div> </div> <div class="cont-wrapper"> <input type="checkbox" id="likeBtn"> <div class="cont-item info1"> <div class="movie-wrapper"> <img src="https://t1.daumcdn.net/cafeattach/1Th9L/ce2ff0d53bce8420dfcf7a9b1623c62698e9b44a"> <div></div> </div> <div class="info-wrapper"> <div class="summary-info"> <div class="text"> <p><span>개요</span>5th Album 'HAPPY BURSTDAY'</p> <p><span>발매</span>2025.05.26.</p> </div> <div class="poster"> <img src="https://t1.daumcdn.net/cafeattach/1Th9L/6277c0c5cc59ab3033e46eba5e266af231aca915"> </div> </div> <div class="details-info"> <div class="story"> <input type="checkbox" id="moreBtn"> <p> 세븐틴의 지난 10년은 도전과 모험의 연속이었다. ‘13(멤버)+3(유닛)+1(하나의 팀)=17’이라는 공식과 함께 데뷔한 이들은 스스로 앨범과 무대를 만들며 ‘자체 제작 아이돌’이라는 새로운 길을 개척했다. 음악적으로는 팝, EDM, 힙합, 록 등 다양한 장르를 흡수했고, 다채로운 유닛을 통해 팀의 색깔을 변주했다. 데뷔를 위해 관객 1000명을 모아야 했던 소년들은 어느새 ‘K-팝 최초’, ‘K-팝 최고’ 기록을 다시 쓰는 ‘글로벌 톱 티어’ 아티스트로 우뚝 섰다.<br><br> 최정상의 자리에서도 세븐틴은 안주하지 않는다. 5월 26일 발매된 [HAPPY BURSTDAY]는 대담한 변화를 멈추지 않겠다는 의지의 선언이자 세븐틴의 마르지 않는 잠재력을 입증하는 장이다. 앨범명은 생일을 축하하는 영어 표현 ‘Happy Birthday’와 폭발, 분출, 시작을 의미하는 단어 ‘Burst’를 결합해 지었다. 도전을 통해 이뤄낸 세븐틴의 재탄생을 기념하는 동시에 이들의 새로운 가능성이 폭발한다는 의미를 담았다. 축하, 혼돈, 도전이 뒤섞인 이들의 강렬한 생일파티가 지금 시작된다.<br><br> [HAPPY BURSTDAY]는 세븐틴이 다시 태어나는 과정을 다층적인 시선으로 그려낸다. 도전과 두려움 사이 선택의 기로를 인터랙티브 형식으로 구현한 트레일러부터 멤버들의 자발적인 실종과 자기 개조, 격정적 재탄생의 흐름을 유기적으로 표현한 콘셉트 포토와 필름, 자신 안의 ‘데어데블(Daredevil·저돌적인 자아)’을 받아들인 세븐틴의 짜릿한 번개 파티를 담은 타이틀곡 뮤직비디오까지. 세븐틴은 도전을 앞두고 당면한 고민과 이를 극복하고 새롭게 다시 태어나겠다는 열망을 솔직하게 드러내 보는 이들에게 공감과 영감을 전한다. </p> <label for="moreBtn"><span class="more">더보기</span><span class="more hide">접기</span></label> </div> <div class="review"> <div> <span>누적 캐럿수</span> <p>20250526만명</p> </div> <div> <span>캐럿 평점</span> <p><span class="star">★</span>10.00</p> </div> <div> <span>셉달 평점</span> <p><span class="star">★</span>10.00</p> </div> </div> <div class="booking"> <a href="https://youtu.be/pS57UX6s-xw">⚡MV 보기⚡</a> <label for="likeBtn"><span class="heart">❤️</span><span class="fill">❤️‍🔥</span></label> </div> </div> </div> </div> <div class="cont-item info2"> <div class="info-wrapper"> <div class="basic"> <div class="text"> <p><span>아티스트</span>세븐틴 (SEVENTEEN)</p> <p><span>발매</span>2025.05.26.</p> <p><span>장르</span>댄스, 발라드, 랩/힙합</p> <p><span>발매사</span>YG PLUS</p> </div> <div class="poster"> <img src="https://search.pstatic.net/common?type=n&size=190x190&quality=95&direct=true&src=https%3A%2F%2Fmusicmeta-phinf.pstatic.net%2Falbum%2F034%2F292%2F34292204.jpg%3Ftype%3Dr204Fll%26v%3D20250526170752"> </div> </div> <div class="booking"> <a href="https://youtu.be/h5dk1hCL_oY?si=OMmI_CygNNq5U9iA">🎂HBD 듣기🎂</a> <label for="likeBtn"><span class="heart">❤️</span><span class="fill">❤️‍🔥</span></label> </div> </div> </div> <div class="cont-item info3"> <div class="info-wrapper"> <input type="radio" name="people-btn" id="peopleBtn1" checked> <input type="radio" name="people-btn" id="peopleBtn2"> <div class="info-menu"> <label for="peopleBtn1">아티스트<span></span></label> <label for="peopleBtn2">팬<span></span></label> </div> <div class="info-cont director"> <h3>세븐틴</h3> <div class="people"> <a href="https://www.instagram.com/reel/DKRdKUmyz9t/"> <div class="photo"> <img src="https://t1.daumcdn.net/cafeattach/1IHuH/75cbff80ddd30361952e2a63c439639c44735658"> </div> <div class="txt"> <p>에스쿱스</p> <span>총괄리더</span> </div> </a> <a href="https://www.instagram.com/reel/DKRZt6ay2h9/"> <div class="photo"> <img src="https://t1.daumcdn.net/cafeattach/1Th9L/237377e112f7ed0627338fb1ab4a3e59b5a6ea2a"> </div> <div class="txt"> <p>정한</p> <span>보컬팀</span> </div> </a> <a href="https://www.instagram.com/reel/DKJu07cSjDH/"> <div class="photo"> <img src="https://t1.daumcdn.net/cafeattach/1IHuH/ddbbf1eada19dadfe183f697f807839bdae7ea98"> </div> <div class="txt"> <p>조슈아</p> <span>보컬팀</span> </div> </a> <a href="https://www.instagram.com/reel/DKO4VkFSwSJ/"> <div class="photo"> <img src="https://t1.daumcdn.net/cafeattach/1IHuH/5d9e8b97fbde7402cf94e1e664f3815dcf43b36d"> </div> <div class="txt"> <p>준</p> <span>퍼포먼스팀</span> </div> </a> <a href="https://www.instagram.com/reel/DKMQJ3NSOvI/"> <div class="photo"> <img src="https://t1.daumcdn.net/cafeattach/1IHuH/d1ec4a002be8223a73c8040d535d090c78c15e58"> </div> <div class="txt"> <p>호시</p> <span>퍼포팀 리더</span> </div> </a> <a href="https://www.instagram.com/reel/DKJyOQeSleN/"> <div class="photo"> <img src="https://t1.daumcdn.net/cafeattach/1IHuH/03b4c5fd5c268b89c0f382ae38267636cfa7c1bd"> </div> <div class="txt"> <p>원우</p> <span>힙합팀</span> </div> </a> <a href="https://www.instagram.com/reel/DKMabN5Sa7k/"> <div class="photo"> <img src="https://t1.daumcdn.net/cafeattach/1IHuH/1f861a417747dd4e97208d4ba5cc02ab5bb6385c"> </div> <div class="txt"> <p>우지</p> <span>보컬팀 리더</span> </div> </a> <a href="https://www.instagram.com/reel/DKJrVzlSDqp/"> <div class="photo"> <img src="https://t1.daumcdn.net/cafeattach/1IHuH/d6da00db3ae3ff952847c03138624dfce75ee9ae"> </div> <div class="txt"> <p>디에잇</p> <span>퍼포먼스팀</span> </div> </a> <a href="https://www.instagram.com/reel/DKMTk1LS0Jv/"> <div class="photo"> <img src="https://t1.daumcdn.net/cafeattach/1IHuH/9949fae98c1b762387ddf50003eb6e346cf0ed07"> </div> <div class="txt"> <p>민규</p> <span>힙합팀</span> </div> </a> <a href="https://www.instagram.com/reel/DKMXBQEyjL3/"> <div class="photo"> <img src="https://t1.daumcdn.net/cafeattach/1IHuH/0556bef2d9ec21571884b999b808d9e84caec3f0"> </div> <div class="txt"> <p>도겸</p> <span>보컬팀</span> </div> </a> <a href="https://www.instagram.com/reel/DKJ1mOKyWvJ/"> <div class="photo"> <img src="https://t1.daumcdn.net/cafeattach/1IHuH/986bbb4ce4590dd9d850a639f75f03fd29b205bf"> </div> <div class="txt"> <p>승관</p> <span>보컬팀</span> </div> </a> <a href="https://www.instagram.com/reel/DKO0-5nyj72/"> <div class="photo"> <img src="https://t1.daumcdn.net/cafeattach/1IHuH/1d3643a0f72630f6f7f172269ef8791f5be875b4"> </div> <div class="txt"> <p>버논</p> <span>힙합팀</span> </div> </a> <a href="https://www.instagram.com/reel/DKO70bTy11J/"> <div class="photo"> <img src="https://t1.daumcdn.net/cafeattach/1IHuH/9475cf2b88c61c2f07b8945e1e9811375290ad3f"> </div> <div class="txt"> <p>디노</p> <span>퍼포먼스팀</span> </div> </a> </div> </div> <div class="info-cont actor"> <h3>캐럿</h3> <div class="people"> <a href="https://youtu.be/FIxMEKNIVVA?si=ABMLuRIucikohUh1"> <div class="photo"> <img src="https://t1.daumcdn.net/cafeattach/1Th9L/8f5cb88f5515945df6d4259ed6ef6d85fce8d025"> </div> <div class="txt"> <p>제갈둥</p> <span>캐럿</span> </div> </a> </div> </div> </div> </div> <div class="cont-item info4"> <div class="info-wrapper"> <h3>💌포토 <span>6</span></h3> <div class="photo-wrapper"> <div><img src="https://t1.daumcdn.net/cafeattach/1Th9L/d6452d553010ea1ac3c4aa959f6392671c1c0849"></div> <div><img src="https://t1.daumcdn.net/cafeattach/1Th9L/df22082478eb9414578eb9778f070772f96194f5"></div> <div><img src="https://t1.daumcdn.net/cafeattach/1Th9L/ef44bba3e29a8691f29001549bec300e89d02936"></div> <div><img src="https://t1.daumcdn.net/cafeattach/1Th9L/0065ca60e447859315233c5b9ff6e0aa14247da0"></div> <div><img src="https://t1.daumcdn.net/cafeattach/1Th9L/15d19ad5e06a27b39f7f14b31f2c6c11a0dde849"></div> <div><img src="https://t1.daumcdn.net/cafeattach/1Th9L/fbe4dc6e34358816dba6d90077aba58a8c645808"></div> </div> </div> </div> </div> </div> <style> :root { --color-main: #14273d; --color-sub: #eef4f8; --color-black: #000; --color-border:#e9e9ec; --color-gray: #bbb; --color-red: #fc4c4e; --color-white: #fff; --rgba-black: rgba(0,0,0,0.1); --rgba-white: rgba(255,255,255,.1); --inner-padding: 20px; --inner-margin: 20px 0; --inner-half: 10px; --font-basic: 14px; --font-big: 18px; --font-medium: 16px; --font-small: 12px; --font-mini: 10px; } .movieWrap {font-size: 14;color: black;text-align:left;} .movieWrap * {margin:0;padding:0;list-style: none;text-decoration: none !important;box-sizing: border-box;color: inherit;} .movieWrap input {display: none;} /* 영화 상단 */ .movieWrap .movie-top {background-color:#14273d;overflow: hidden;} .movieWrap .movie-top .title-wrapper {padding:20px;} .movieWrap .movie-top .title-wrapper > div {display: flex;align-items: center;color:white;} .movieWrap .movie-top .title-wrapper h2 {font-size: 18;} .movieWrap .movie-top .title-wrapper span {font-size: 10;border: 1px solid #bbb;border-radius: 50px;padding: 2px 5px;margin-left:5px;} .movieWrap .movie-top .title-wrapper > p {color:#bbb;} .movieWrap .movie-top .menu-list {width: 100%;overflow-x: scroll;white-space: nowrap;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;} .movieWrap .movie-top .menu-list::-webkit-scrollbar {display: none;} .movieWrap .movie-top .menu-list > .menu-item {display: inline-block;line-height: 20px;color:white;padding:5px 10px;background-color: rgb(115, 129, 115, 0.4);border-radius: 100px;} /* 영화 영상 */ .movieWrap .cont-wrapper .info-wrapper {position: relative; padding: 20px;border-radius: 20px 20px 0 0;background-color: white;}} .movieWrap .cont-wrapper .info1 {display: none;} /* 영화 영상 부분 숨김 */ .movieWrap .cont-wrapper .info1. movie-wrapper {position: relative;} .movieWrap .cont-wrapper .info1 .movie-wrapper::after {content:'';position:absolute;top:0;left:0;width:100%;height:30%;background:linear-gradient(to bottom, #14273d 5%, transparent);} .movieWrap .cont-wrapper .info1 .movie-wrapper>div {position:absolute;bottom:-20px;left:0;width:100%;height:40%;background:linear-gradient(to top, #14273d 25%, transparent);} .movieWrap .cont-wrapper .info1 .movie-wrapper>div>img {width:100%;height:auto;border:0; padding: 0px !important;} #primaryContent, .cont_comment{background: transparent !important; border: transparent !important;} /* 소개 */ .movieWrap .cont-wrapper .info1 {display: none;} .movieWrap .cont-wrapper .info1 .movie-wrapper {position: relative;} .movieWrap .cont-wrapper .info1 .movie-wrapper::after {content:'';position: absolute;top: 0;left: 0;width: 100%;height: 30%;background: linear-gradient(to bottom, #14273d 5%, transparent);} .movieWrap .cont-wrapper .info1 .movie-wrapper > div {position: absolute;bottom:-20px;left: 0;width: 100%;height: 40%;background: linear-gradient(to top, #14273d 25%, transparent);} .movieWrap .cont-wrapper .info1 .summary-info {position: relative;width: 100%;display: flex;justify-content: space-between;} .movieWrap .cont-wrapper .info1 .summary-info > .text {width: 70%;padding-left:10px;border-left: 5px solid #eef4f8;} .movieWrap .cont-wrapper .info1 .summary-info > .text > p > span {padding-right:5px;color:#bbb;} .movieWrap .cont-wrapper .info1 .summary-info > .poster {position: absolute;bottom:0;right:0;width:100px;height:110px;overflow:hidden;border-radius: 10px;} .movieWrap .cont-wrapper .info1 .summary-info > .poster > img {width: 100%;} .movieWrap .cont-wrapper .info1 .details-info > .story {margin: 10px 0;} .movieWrap .cont-wrapper .info1 .details-info > .story > p {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical;text-overflow: ellipsis;word-break: break-all;overflow: hidden;} .movieWrap .cont-wrapper .info1 .details-info > .story .more {color: #bbb;} .movieWrap .cont-wrapper .info1 .details-info > .story .hide {display: none;} .movieWrap .cont-wrapper .info1 .details-info > .review {display: flex;justify-content: space-between;margin-bottom: 10px;} .movieWrap .cont-wrapper .info1 .details-info > .review > div {background-color: #eef4f8;width: 100%;padding: 10px;text-align: center;font-weight: bold;border-radius:10px;} .movieWrap .cont-wrapper .info1 .details-info > .review > div:not(div:last-child) {margin-right: 5px;} .movieWrap .cont-wrapper .info1 .details-info > .review > div > span {font-size: 12px;color:#14273d;} .movieWrap .cont-wrapper .info1 .details-info > .review > div .star {color:#fc4c4e;} .movieWrap .cont-wrapper .info1 .details-info > .booking {display: flex;justify-content: space-between;border-top: 1px solid #e9e9ec;padding-top: 10px;} .movieWrap .cont-wrapper .info1 .details-info > .booking > * {width:100%;border:1px solid #e9e9ec;padding: 10px;text-align: center;color:inherit;border-radius: 5px;} .movieWrap .cont-wrapper .info1 .details-info > .booking > label {width: 20%;margin-left: 5px;color:#fc4c4e;} /* 기본 정보 */ .movieWrap .cont-wrapper .info2 {display:none;background-color: #14273d;} .movieWrap .cont-wrapper .info2 .basic {display: flex;justify-content: space-between;margin-bottom: 10px;} .movieWrap .cont-wrapper .info2 .basic > .text {padding-left: 10px;border-left: 5px solid #eef4f8;} .movieWrap .cont-wrapper .info2 .basic > .text > p:not(p:last-child) {padding-bottom: 10px;} .movieWrap .cont-wrapper .info2 .basic > .text > p > span {padding-right:5px;color:#bbb;} .movieWrap .cont-wrapper .info2 .basic > .poster {width: 100px;height:100px;overflow:hidden;border-radius: 10px;} .movieWrap .cont-wrapper .info2 .basic > .poster > img {width: 100%;} .movieWrap .cont-wrapper .info2 .booking {display: flex;justify-content: space-between;padding-top: 10px;} .movieWrap .cont-wrapper .info2 .booking > * {width:100%;border:1px solid #e9e9ec;padding: 10px;text-align: center;color:inherit;border-radius: 5px;} .movieWrap .cont-wrapper .info2 .booking > label {width: 20%;margin-left: 5px;color:#fc4c4e;} /* 감독/출연 */ .movieWrap .cont-wrapper .info3 {display:none;background-color: #14273d;} .movieWrap .cont-wrapper .info3 .info-menu {display: flex;border-bottom: 1px solid #e9e9ec;} .movieWrap .cont-wrapper .info3 .info-menu > label {position: relative;margin-right: 10px;padding-bottom: 10px;} .movieWrap .cont-wrapper .info3 .info-menu > label > span {display:none;position: absolute;top:100%;left: 0;width: 100%;border-bottom: 2px solid #254124;} .movieWrap .cont-wrapper .info3 .info-cont {padding-top: 20px;padding-bottom: 10px;} .movieWrap .cont-wrapper .info3 .info-cont > h3 {font-size: 18;} .movieWrap .cont-wrapper .info3 .info-cont > .people {display: flex;padding-top: 20px;padding-bottom: 10px;overflow-x: scroll;} .movieWrap .cont-wrapper .info3 .info-cont > .people::-webkit-scrollbar {display: none;} .movieWrap .cont-wrapper .info3 .info-cont > .people > a {flex-shrink: 0;position: relative;;width: 90px;height:160px;overflow: hidden;border: 1px solid #e9e9ec;border-radius: 10px;margin-right: 10px;box-shadow: 0 2px 3px rgba(0,0,0,0.1);} .movieWrap .cont-wrapper .info3 .info-cont > .people .photo > img {width: 100%;} .movieWrap .cont-wrapper .info3 .info-cont > .people .txt {position: absolute;bottom:0;left:0;width:100%;background-color: white;padding: 10px;} .movieWrap .cont-wrapper .info3 .director {display: none;} .movieWrap .cont-wrapper .info3 .actor {display: none;} /* 포토 */ .movieWrap .cont-wrapper .info4 {display: none;background-color: #14273d;} .movieWrap .cont-wrapper .info4 h3 {font-size: 18px;margin-bottom: 10px;} .movieWrap .cont-wrapper .info4 .photo-wrapper {display: grid; grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3, 1fr);width:100%;min-height:auto;max-height:700px;border-radius: 20px;overflow: hidden;} .movieWrap .cont-wrapper .info4 .photo-wrapper > div {display:block;width: 100%;height: 100%;overflow: hidden;border: 1px solid #fff;} .movieWrap .cont-wrapper .info4 .photo-wrapper > div > img {object-fit: cover;width: 100%;height: 100%;} .fill {display: none;} /* 기능 */ #contOpenBtn1:checked ~ .cont-wrapper .info1, #contOpenBtn2:checked ~ .cont-wrapper .info2, #contOpenBtn3:checked ~ .cont-wrapper .info3, #contOpenBtn4:checked ~ .cont-wrapper .info4, #contOpenBtn5:checked ~ .cont-wrapper .info5, #contOpenBtn6:checked ~ .cont-wrapper .info6 {display: block;} #moreBtn:checked + p {display: block;} #moreBtn:checked ~ label .more {display: none;} #moreBtn:checked ~ label .hide {display: block;} #likeBtn:checked ~ .cont-item label .heart {display: none;} #likeBtn:checked ~ .cont-item label .fill {display: block;} #peopleBtn1:checked ~ .director, #peopleBtn2:checked ~ .actor {display: block;} #peopleBtn1:checked ~ .info-menu label:nth-child(1) span, #peopleBtn2:checked ~ .info-menu label:nth-child(2) span {display: block;} /* 다음카페 css */ .article_content {padding: 0; overflow:hidden;} .figure-html {margin: 0 !important;} .figure-html img {margin: 0 !important;} </style>"><div data-ke-class="article"> <div class="movieWrap"> <input type="radio" name="cont-open-btn" id="contOpenBtn1" checked> <input type="radio" name="cont-open-btn" id="contOpenBtn2"> <input type="radio" name="cont-open-btn" id="contOpenBtn3"> <input type="radio" name="cont-open-btn" id="contOpenBtn4"> <div class="movie-top"> <div class="title-wrapper"> <div><h2>𝐓𝐇𝐔𝐍𝐃𝐄𝐑</h2><span>title</span></div> <p>앨범 | 세븐틴 (SEVENTEEN) | 2025.05.26.</p> </div> <div class="menu-list"> <label for="contOpenBtn1" class="menu-item">소개</label> <label for="contOpenBtn2" class="menu-item">앨범정보</label> <label for="contOpenBtn3" class="menu-item">아티스트/팬</label> <label for="contOpenBtn4" class="menu-item">💌포토</label> </div> </div> <div class="cont-wrapper"> <input type="checkbox" id="likeBtn"> <div class="cont-item info1"> <div class="movie-wrapper"> <img src="https://t1.daumcdn.net/cafeattach/1Th9L/ce2ff0d53bce8420dfcf7a9b1623c62698e9b44a"> <div></div> </div> <div class="info-wrapper"> <div class="summary-info"> <div class="text"> <p><span>개요</span>5th Album 'HAPPY BURSTDAY'</p> <p><span>발매</span>2025.05.26.</p> </div> <div class="poster"> <img src="https://t1.daumcdn.net/cafeattach/1Th9L/6277c0c5cc59ab3033e46eba5e266af231aca915"> </div> </div> <div class="details-info"> <div class="story"> <input type="checkbox" id="moreBtn"> <p> 세븐틴의 지난 10년은 도전과 모험의 연속이었다. ‘13(멤버)+3(유닛)+1(하나의 팀)=17’이라는 공식과 함께 데뷔한 이들은 스스로 앨범과 무대를 만들며 ‘자체 제작 아이돌’이라는 새로운 길을 개척했다. 음악적으로는 팝, EDM, 힙합, 록 등 다양한 장르를 흡수했고, 다채로운 유닛을 통해 팀의 색깔을 변주했다. 데뷔를 위해 관객 1000명을 모아야 했던 소년들은 어느새 ‘K-팝 최초’, ‘K-팝 최고’ 기록을 다시 쓰는 ‘글로벌 톱 티어’ 아티스트로 우뚝 섰다.<br><br> 최정상의 자리에서도 세븐틴은 안주하지 않는다. 5월 26일 발매된 [HAPPY BURSTDAY]는 대담한 변화를 멈추지 않겠다는 의지의 선언이자 세븐틴의 마르지 않는 잠재력을 입증하는 장이다. 앨범명은 생일을 축하하는 영어 표현 ‘Happy Birthday’와 폭발, 분출, 시작을 의미하는 단어 ‘Burst’를 결합해 지었다. 도전을 통해 이뤄낸 세븐틴의 재탄생을 기념하는 동시에 이들의 새로운 가능성이 폭발한다는 의미를 담았다. 축하, 혼돈, 도전이 뒤섞인 이들의 강렬한 생일파티가 지금 시작된다.<br><br> [HAPPY BURSTDAY]는 세븐틴이 다시 태어나는 과정을 다층적인 시선으로 그려낸다. 도전과 두려움 사이 선택의 기로를 인터랙티브 형식으로 구현한 트레일러부터 멤버들의 자발적인 실종과 자기 개조, 격정적 재탄생의 흐름을 유기적으로 표현한 콘셉트 포토와 필름, 자신 안의 ‘데어데블(Daredevil·저돌적인 자아)’을 받아들인 세븐틴의 짜릿한 번개 파티를 담은 타이틀곡 뮤직비디오까지. 세븐틴은 도전을 앞두고 당면한 고민과 이를 극복하고 새롭게 다시 태어나겠다는 열망을 솔직하게 드러내 보는 이들에게 공감과 영감을 전한다. </p> <label for="moreBtn"><span class="more">더보기</span><span class="more hide">접기</span></label> </div> <div class="review"> <div> <span>누적 캐럿수</span> <p>20250526만명</p> </div> <div> <span>캐럿 평점</span> <p><span class="star">★</span>10.00</p> </div> <div> <span>셉달 평점</span> <p><span class="star">★</span>10.00</p> </div> </div> <div class="booking"> <a href="https://youtu.be/pS57UX6s-xw">⚡MV 보기⚡</a> <label for="likeBtn"><span class="heart">❤️</span><span class="fill">❤️‍🔥</span></label> </div> </div> </div> </div> <div class="cont-item info2"> <div class="info-wrapper"> <div class="basic"> <div class="text"> <p><span>아티스트</span>세븐틴 (SEVENTEEN)</p> <p><span>발매</span>2025.05.26.</p> <p><span>장르</span>댄스, 발라드, 랩/힙합</p> <p><span>발매사</span>YG PLUS</p> </div> <div class="poster"> <img src="https://img1.daumcdn.net/relay/cafe/original/?fname=https%3A%2F%2Fsearch.pstatic.net%2Fcommon%3Ftype%3Dn%26size%3D190x190%26quality%3D95%26direct%3Dtrue%26src%3Dhttps%253A%252F%252Fmusicmeta-phinf.pstatic.net%252Falbum%252F034%252F292%252F34292204.jpg%253Ftype%253Dr204Fll%2526v%253D20250526170752"> </div> </div> <div class="booking"> <a href="https://youtu.be/h5dk1hCL_oY?si=OMmI_CygNNq5U9iA">🎂HBD 듣기🎂</a> <label for="likeBtn"><span class="heart">❤️</span><span class="fill">❤️‍🔥</span></label> </div> </div> </div> <div class="cont-item info3"> <div class="info-wrapper"> <input type="radio" name="people-btn" id="peopleBtn1" checked> <input type="radio" name="people-btn" id="peopleBtn2"> <div class="info-menu"> <label for="peopleBtn1">아티스트<span></span></label> <label for="peopleBtn2">팬<span></span></label> </div> <div class="info-cont director"> <h3>세븐틴</h3> <div class="people"> <a href="https://www.instagram.com/reel/DKRdKUmyz9t/"> <div class="photo"> <img src="https://t1.daumcdn.net/cafeattach/1IHuH/75cbff80ddd30361952e2a63c439639c44735658"> </div> <div class="txt"> <p>에스쿱스</p> <span>총괄리더</span> </div> </a> <a href="https://www.instagram.com/reel/DKRZt6ay2h9/"> <div class="photo"> <img src="https://t1.daumcdn.net/cafeattach/1Th9L/237377e112f7ed0627338fb1ab4a3e59b5a6ea2a"> </div> <div class="txt"> <p>정한</p> <span>보컬팀</span> </div> </a> <a href="https://www.instagram.com/reel/DKJu07cSjDH/"> <div class="photo"> <img src="https://t1.daumcdn.net/cafeattach/1IHuH/ddbbf1eada19dadfe183f697f807839bdae7ea98"> </div> <div class="txt"> <p>조슈아</p> <span>보컬팀</span> </div> </a> <a href="https://www.instagram.com/reel/DKO4VkFSwSJ/"> <div class="photo"> <img src="https://t1.daumcdn.net/cafeattach/1IHuH/5d9e8b97fbde7402cf94e1e664f3815dcf43b36d"> </div> <div class="txt"> <p>준</p> <span>퍼포먼스팀</span> </div> </a> <a href="https://www.instagram.com/reel/DKMQJ3NSOvI/"> <div class="photo"> <img src="https://t1.daumcdn.net/cafeattach/1IHuH/d1ec4a002be8223a73c8040d535d090c78c15e58"> </div> <div class="txt"> <p>호시</p> <span>퍼포팀 리더</span> </div> </a> <a href="https://www.instagram.com/reel/DKJyOQeSleN/"> <div class="photo"> <img src="https://t1.daumcdn.net/cafeattach/1IHuH/03b4c5fd5c268b89c0f382ae38267636cfa7c1bd"> </div> <div class="txt"> <p>원우</p> <span>힙합팀</span> </div> </a> <a href="https://www.instagram.com/reel/DKMabN5Sa7k/"> <div class="photo"> <img src="https://t1.daumcdn.net/cafeattach/1IHuH/1f861a417747dd4e97208d4ba5cc02ab5bb6385c"> </div> <div class="txt"> <p>우지</p> <span>보컬팀 리더</span> </div> </a> <a href="https://www.instagram.com/reel/DKJrVzlSDqp/"> <div class="photo"> <img src="https://t1.daumcdn.net/cafeattach/1IHuH/d6da00db3ae3ff952847c03138624dfce75ee9ae"> </div> <div class="txt"> <p>디에잇</p> <span>퍼포먼스팀</span> </div> </a> <a href="https://www.instagram.com/reel/DKMTk1LS0Jv/"> <div class="photo"> <img src="https://t1.daumcdn.net/cafeattach/1IHuH/9949fae98c1b762387ddf50003eb6e346cf0ed07"> </div> <div class="txt"> <p>민규</p> <span>힙합팀</span> </div> </a> <a href="https://www.instagram.com/reel/DKMXBQEyjL3/"> <div class="photo"> <img src="https://t1.daumcdn.net/cafeattach/1IHuH/0556bef2d9ec21571884b999b808d9e84caec3f0"> </div> <div class="txt"> <p>도겸</p> <span>보컬팀</span> </div> </a> <a href="https://www.instagram.com/reel/DKJ1mOKyWvJ/"> <div class="photo"> <img src="https://t1.daumcdn.net/cafeattach/1IHuH/986bbb4ce4590dd9d850a639f75f03fd29b205bf"> </div> <div class="txt"> <p>승관</p> <span>보컬팀</span> </div> </a> <a href="https://www.instagram.com/reel/DKO0-5nyj72/"> <div class="photo"> <img src="https://t1.daumcdn.net/cafeattach/1IHuH/1d3643a0f72630f6f7f172269ef8791f5be875b4"> </div> <div class="txt"> <p>버논</p> <span>힙합팀</span> </div> </a> <a href="https://www.instagram.com/reel/DKO70bTy11J/"> <div class="photo"> <img src="https://t1.daumcdn.net/cafeattach/1IHuH/9475cf2b88c61c2f07b8945e1e9811375290ad3f"> </div> <div class="txt"> <p>디노</p> <span>퍼포먼스팀</span> </div> </a> </div> </div> <div class="info-cont actor"> <h3>캐럿</h3> <div class="people"> <a href="https://youtu.be/FIxMEKNIVVA?si=ABMLuRIucikohUh1"> <div class="photo"> <img src="https://t1.daumcdn.net/cafeattach/1Th9L/8f5cb88f5515945df6d4259ed6ef6d85fce8d025"> </div> <div class="txt"> <p>제갈둥</p> <span>캐럿</span> </div> </a> </div> </div> </div> </div> <div class="cont-item info4"> <div class="info-wrapper"> <h3>💌포토 <span>6</span></h3> <div class="photo-wrapper"> <div><img src="https://t1.daumcdn.net/cafeattach/1Th9L/d6452d553010ea1ac3c4aa959f6392671c1c0849"></div> <div><img src="https://t1.daumcdn.net/cafeattach/1Th9L/df22082478eb9414578eb9778f070772f96194f5"></div> <div><img src="https://t1.daumcdn.net/cafeattach/1Th9L/ef44bba3e29a8691f29001549bec300e89d02936"></div> <div><img src="https://t1.daumcdn.net/cafeattach/1Th9L/0065ca60e447859315233c5b9ff6e0aa14247da0"></div> <div><img src="https://t1.daumcdn.net/cafeattach/1Th9L/15d19ad5e06a27b39f7f14b31f2c6c11a0dde849"></div> <div><img src="https://t1.daumcdn.net/cafeattach/1Th9L/fbe4dc6e34358816dba6d90077aba58a8c645808"></div> </div> </div> </div> </div> </div> <style> :root { --color-main: #14273d; --color-sub: #eef4f8; --color-black: #000; --color-border:#e9e9ec; --color-gray: #bbb; --color-red: #fc4c4e; --color-white: #fff; --rgba-black: rgba(0,0,0,0.1); --rgba-white: rgba(255,255,255,.1); --inner-padding: 20px; --inner-margin: 20px 0; --inner-half: 10px; --font-basic: 14px; --font-big: 18px; --font-medium: 16px; --font-small: 12px; --font-mini: 10px; } .movieWrap {font-size: 14;color: black;text-align:left;} .movieWrap * {margin:0;padding:0;list-style: none;text-decoration: none !important;box-sizing: border-box;color: inherit;} .movieWrap input {display: none;} /* 영화 상단 */ .movieWrap .movie-top {background-color:#14273d;overflow: hidden;} .movieWrap .movie-top .title-wrapper {padding:20px;} .movieWrap .movie-top .title-wrapper > div {display: flex;align-items: center;color:white;} .movieWrap .movie-top .title-wrapper h2 {font-size: 18;} .movieWrap .movie-top .title-wrapper span {font-size: 10;border: 1px solid #bbb;border-radius: 50px;padding: 2px 5px;margin-left:5px;} .movieWrap .movie-top .title-wrapper > p {color:#bbb;} .movieWrap .movie-top .menu-list {width: 100%;overflow-x: scroll;white-space: nowrap;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;} .movieWrap .movie-top .menu-list::-webkit-scrollbar {display: none;} .movieWrap .movie-top .menu-list > .menu-item {display: inline-block;line-height: 20px;color:white;padding:5px 10px;background-color: rgb(115, 129, 115, 0.4);border-radius: 100px;} /* 영화 영상 */ .movieWrap .cont-wrapper .info-wrapper {position: relative; padding: 20px;border-radius: 20px 20px 0 0;background-color: white;}} .movieWrap .cont-wrapper .info1 {display: none;} /* 영화 영상 부분 숨김 */ .movieWrap .cont-wrapper .info1. movie-wrapper {position: relative;} .movieWrap .cont-wrapper .info1 .movie-wrapper::after {content:'';position:absolute;top:0;left:0;width:100%;height:30%;background:linear-gradient(to bottom, #14273d 5%, transparent);} .movieWrap .cont-wrapper .info1 .movie-wrapper>div {position:absolute;bottom:-20px;left:0;width:100%;height:40%;background:linear-gradient(to top, #14273d 25%, transparent);} .movieWrap .cont-wrapper .info1 .movie-wrapper>div>img {width:100%;height:auto;border:0; padding: 0px !important;} #primaryContent, .cont_comment{background: transparent !important; border: transparent !important;} /* 소개 */ .movieWrap .cont-wrapper .info1 {display: none;} .movieWrap .cont-wrapper .info1 .movie-wrapper {position: relative;} .movieWrap .cont-wrapper .info1 .movie-wrapper::after {content:'';position: absolute;top: 0;left: 0;width: 100%;height: 30%;background: linear-gradient(to bottom, #14273d 5%, transparent);} .movieWrap .cont-wrapper .info1 .movie-wrapper > div {position: absolute;bottom:-20px;left: 0;width: 100%;height: 40%;background: linear-gradient(to top, #14273d 25%, transparent);} .movieWrap .cont-wrapper .info1 .summary-info {position: relative;width: 100%;display: flex;justify-content: space-between;} .movieWrap .cont-wrapper .info1 .summary-info > .text {width: 70%;padding-left:10px;border-left: 5px solid #eef4f8;} .movieWrap .cont-wrapper .info1 .summary-info > .text > p > span {padding-right:5px;color:#bbb;} .movieWrap .cont-wrapper .info1 .summary-info > .poster {position: absolute;bottom:0;right:0;width:100px;height:110px;overflow:hidden;border-radius: 10px;} .movieWrap .cont-wrapper .info1 .summary-info > .poster > img {width: 100%;} .movieWrap .cont-wrapper .info1 .details-info > .story {margin: 10px 0;} .movieWrap .cont-wrapper .info1 .details-info > .story > p {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical;text-overflow: ellipsis;word-break: break-all;overflow: hidden;} .movieWrap .cont-wrapper .info1 .details-info > .story .more {color: #bbb;} .movieWrap .cont-wrapper .info1 .details-info > .story .hide {display: none;} .movieWrap .cont-wrapper .info1 .details-info > .review {display: flex;justify-content: space-between;margin-bottom: 10px;} .movieWrap .cont-wrapper .info1 .details-info > .review > div {background-color: #eef4f8;width: 100%;padding: 10px;text-align: center;font-weight: bold;border-radius:10px;} .movieWrap .cont-wrapper .info1 .details-info > .review > div:not(div:last-child) {margin-right: 5px;} .movieWrap .cont-wrapper .info1 .details-info > .review > div > span {font-size: 12px;color:#14273d;} .movieWrap .cont-wrapper .info1 .details-info > .review > div .star {color:#fc4c4e;} .movieWrap .cont-wrapper .info1 .details-info > .booking {display: flex;justify-content: space-between;border-top: 1px solid #e9e9ec;padding-top: 10px;} .movieWrap .cont-wrapper .info1 .details-info > .booking > * {width:100%;border:1px solid #e9e9ec;padding: 10px;text-align: center;color:inherit;border-radius: 5px;} .movieWrap .cont-wrapper .info1 .details-info > .booking > label {width: 20%;margin-left: 5px;color:#fc4c4e;} /* 기본 정보 */ .movieWrap .cont-wrapper .info2 {display:none;background-color: #14273d;} .movieWrap .cont-wrapper .info2 .basic {display: flex;justify-content: space-between;margin-bottom: 10px;} .movieWrap .cont-wrapper .info2 .basic > .text {padding-left: 10px;border-left: 5px solid #eef4f8;} .movieWrap .cont-wrapper .info2 .basic > .text > p:not(p:last-child) {padding-bottom: 10px;} .movieWrap .cont-wrapper .info2 .basic > .text > p > span {padding-right:5px;color:#bbb;} .movieWrap .cont-wrapper .info2 .basic > .poster {width: 100px;height:100px;overflow:hidden;border-radius: 10px;} .movieWrap .cont-wrapper .info2 .basic > .poster > img {width: 100%;} .movieWrap .cont-wrapper .info2 .booking {display: flex;justify-content: space-between;padding-top: 10px;} .movieWrap .cont-wrapper .info2 .booking > * {width:100%;border:1px solid #e9e9ec;padding: 10px;text-align: center;color:inherit;border-radius: 5px;} .movieWrap .cont-wrapper .info2 .booking > label {width: 20%;margin-left: 5px;color:#fc4c4e;} /* 감독/출연 */ .movieWrap .cont-wrapper .info3 {display:none;background-color: #14273d;} .movieWrap .cont-wrapper .info3 .info-menu {display: flex;border-bottom: 1px solid #e9e9ec;} .movieWrap .cont-wrapper .info3 .info-menu > label {position: relative;margin-right: 10px;padding-bottom: 10px;} .movieWrap .cont-wrapper .info3 .info-menu > label > span {display:none;position: absolute;top:100%;left: 0;width: 100%;border-bottom: 2px solid #254124;} .movieWrap .cont-wrapper .info3 .info-cont {padding-top: 20px;padding-bottom: 10px;} .movieWrap .cont-wrapper .info3 .info-cont > h3 {font-size: 18;} .movieWrap .cont-wrapper .info3 .info-cont > .people {display: flex;padding-top: 20px;padding-bottom: 10px;overflow-x: scroll;} .movieWrap .cont-wrapper .info3 .info-cont > .people::-webkit-scrollbar {display: none;} .movieWrap .cont-wrapper .info3 .info-cont > .people > a {flex-shrink: 0;position: relative;;width: 90px;height:160px;overflow: hidden;border: 1px solid #e9e9ec;border-radius: 10px;margin-right: 10px;box-shadow: 0 2px 3px rgba(0,0,0,0.1);} .movieWrap .cont-wrapper .info3 .info-cont > .people .photo > img {width: 100%;} .movieWrap .cont-wrapper .info3 .info-cont > .people .txt {position: absolute;bottom:0;left:0;width:100%;background-color: white;padding: 10px;} .movieWrap .cont-wrapper .info3 .director {display: none;} .movieWrap .cont-wrapper .info3 .actor {display: none;} /* 포토 */ .movieWrap .cont-wrapper .info4 {display: none;background-color: #14273d;} .movieWrap .cont-wrapper .info4 h3 {font-size: 18px;margin-bottom: 10px;} .movieWrap .cont-wrapper .info4 .photo-wrapper {display: grid; grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3, 1fr);width:100%;min-height:auto;max-height:700px;border-radius: 20px;overflow: hidden;} .movieWrap .cont-wrapper .info4 .photo-wrapper > div {display:block;width: 100%;height: 100%;overflow: hidden;border: 1px solid #fff;} .movieWrap .cont-wrapper .info4 .photo-wrapper > div > img {object-fit: cover;width: 100%;height: 100%;} .fill {display: none;} /* 기능 */ #contOpenBtn1:checked ~ .cont-wrapper .info1, #contOpenBtn2:checked ~ .cont-wrapper .info2, #contOpenBtn3:checked ~ .cont-wrapper .info3, #contOpenBtn4:checked ~ .cont-wrapper .info4, #contOpenBtn5:checked ~ .cont-wrapper .info5, #contOpenBtn6:checked ~ .cont-wrapper .info6 {display: block;} #moreBtn:checked + p {display: block;} #moreBtn:checked ~ label .more {display: none;} #moreBtn:checked ~ label .hide {display: block;} #likeBtn:checked ~ .cont-item label .heart {display: none;} #likeBtn:checked ~ .cont-item label .fill {display: block;} #peopleBtn1:checked ~ .director, #peopleBtn2:checked ~ .actor {display: block;} #peopleBtn1:checked ~ .info-menu label:nth-child(1) span, #peopleBtn2:checked ~ .info-menu label:nth-child(2) span {display: block;} /* 다음카페 css */ .article_content {padding: 0; overflow:hidden;} .figure-html {margin: 0 !important;} .figure-html img {margin: 0 !important;} </style></div></div>