.event240711-wrap {overflow: hidden; font-family: 'NanumSquareRoundOTF';}
header {background-color: #70411E;}
footer article,
section article {position: relative;}
section.cont01 {background-color: #FFDCE6;}
section.cont02 {background-color: #FC9D10;}
section.cont03 {background-color: #6C22D7;}
section.cont04 {background-color: #E6D7FF;}
section.cont05 {background-color: #E1CEFF;}
section.cont06 {background-color: #6C22D7;}
footer {background-color: #6C22D7;}
#chocosongAudio {position: fixed; left: 0; top: -100px;}
.vod .vod-btn.vod-pause {opacity: 0; transition: all 0.3s ease;}
.vod:hover .vod-btn.vod-pause {opacity: 1;}

@media all and (min-width: 768px) {
    header article {position: relative; max-width: 1920px; margin: auto;}
    header {display: flex; justify-content: center;}
    header article > img {width: 1920px; max-width: 1920px;}
    header .btn-choco {position: absolute; left: 18.5%; top: 26px; width: 5%; padding: 1.4%; }
    header .btn-mirean {position: absolute; right: 18.5%; top: 28px; width: 7.5%; padding: 1.4%; }
    header .audio-controls {position: absolute; left: 50%; bottom: 38px; width: 348px; height: 93px; transform: translateX(-50%);}
    section, footer {display: flex; flex-direction: column; align-items: center; padding: 0 30px;}
    footer article,
    section article {max-width: 1244px; margin: auto; padding: 100px 0px; text-align: center;}
    section.cont01 {position: relative;}
    section.cont01 > img {width: 1920px; max-width: 1920px;}
    section.cont01 article {position: absolute; left: 50%; top: 0; width:100%; height: 100%; transform: translateX(-50%);}
    section.cont01 .vod {position: absolute; left: 50%; top: 314px; transform: translateX(-50%); width: 272px; height: 482px; margin: auto; border-radius: 18px; overflow: hidden; background-color: #000;}
    section.cont01 .vod .vod-btn {position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; transform: translate(-50%, -50%); z-index: 10;}
    section.cont01 .vod video {width: 100%; height: 100%;}
    section.cont01 .title {width: 577px; margin: 32px auto 0 auto;}
    section.cont01 .img-01 {position: absolute; right: -30px; top: 208px; width: 290px; height: 218px;}
    section.cont01 .img-02 {position: absolute; left: 0; bottom: -122px; width: 265px; height: 258px;}
    section.cont02 {padding: 0;}
    section.cont02 > img {width: 1920px; max-width: 1920px;}
    section.cont03 .textBox {margin: 40px 0  100px 0;}
    section.cont03 .textBox .con {position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 648px; height: 138px; margin: auto; border-radius: 100px; background-color: #340974; color: #fff; text-align: center;}
    section.cont03 .textBox .con .tit {font-weight: 800; font-size: 40px; line-height: 56px; letter-spacing: -2px;}
    section.cont03 .textBox .con .tit strong {color: #FFFC00;}
    section.cont03 .textBox .con .info {font-weight: 700; font-size: 24px; line-height: 32px; opacity: 0.4;}
    section.cont03 .textBox .con.case2::after {content:''; position: absolute; right: 0; bottom: 0; display: block; width: 13.4796%; height: 68.116%; background: url('../images/event/240711/pc/article_03_icon.png') no-repeat center center / contain;}
    section.cont03 .slides {width: 966px; margin: auto;}
    section.cont03 .slides .swiper-wrapper {display: flex; flex-wrap: wrap; justify-content: center; gap: 60px;}
    section.cont03 .slides .swiper-slide {width: 282px; height: 499px;}
    section.cont03 .slides .swiper-slide .vod,
    section.cont03 .slides .swiper-slide a {display: flex; position: relative; height: 100%; overflow: hidden; border-radius: 18px;}
    section.cont03 .slides .swiper-slide .vod video,
    section.cont03 .slides .swiper-slide a img {flex:none; width: 100%;object-fit:cover;}
    section.cont03 .slides .swiper-slide .vod::before,
    section.cont03 .slides .swiper-slide a::before {content:''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); opacity: 1; transition: all 0.2s ease;}
    section.cont03 .slides .swiper-slide .vod.is-played::before {opacity: 0;}
    section.cont03 .slides .swiper-slide .vod .vod-btn,
    section.cont03 .slides .swiper-slide a::after {content:''; display: block; position: absolute; left: 50%; top: 50%; z-index: 10; width: 100px; height: 100px; background: url('../images/event/240711/pc/icon_vod_play.png') no-repeat center center / contain; transform: translate(-50%, -50%);}
    section.cont03 .slides .swiper-pagination,
    section.cont03 .slides .swiper-button-prev,
    section.cont03 .slides .swiper-button-next {display: none;}
    section.cont03 .btns {position: relative; margin: auto -30px; max-width: 1920px; text-align: center;}
    section.cont03 .btns .link-01 {display: block; position: absolute; left: 0; top: 0; width: 50%; padding-top: 7.5%;}
    section.cont03 .btns .link-02 {display: block; position: absolute; right: 0; top: 0; width: 50%; padding-top: 7.5%;}
    section.cont04 .tab_link {display: flex; position: absolute; left: 0; top: 284px; width: 100%; height: 95px;}
    section.cont04 .tab_link a {display: block; width: 50%;}
    section.cont04 .img-02 {position: absolute; left: -103px; top: 435px; width: 266px; height: 260px;}
    section.cont05 .img-01 {position: absolute; left: calc(100% - 60px); bottom: 100%; transform: translateY(50%); width: 372px;}
    section.cont05 .img-02 {position: absolute; right: calc(100% - 60px); top: 100%; transform: translateY(-50%); width: 345px;}
    section.cont05 .hash-tags {display: flex; position: absolute; left: 32%; top: 19.3%; width: calc(100% - 32%); text-align: left; letter-spacing: -1.2px; gap: 1%;}
    section.cont05 .hash-tags .link-hash {color: #340A78; font-size: 20px; line-height: 28px; font-weight: 700;}
    section.cont05 .btn-group {display: flex; flex-wrap: wrap; justify-content: center; position: absolute; left: 50%; top: 60.4%; width: 64%; gap: 28px 20px; transform: translateX(-50%);}
    section.cont05 .link-01,
    section.cont05 .link-02 {width: 360px;}
    section.cont05 .link-03 {width: 600px;}
    section.cont06 .title {margin-bottom: 64px;}
    section.cont06 .text-wrap {position: relative;}
    section.cont06 .text {display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; left: 10%; right: 10%; top: 0%; width: 80%; height: 257px; color: #fff;}
    section.cont06 .text .challenge {font-size: 32px; line-height: 44px; font-weight: 700; letter-spacing: -1px;}
    section.cont06 .text .point {margin-top: 8px; font-size: 56px; line-height: 78px; font-weight: 800; letter-spacing: -2px;}
    section.cont06 .text .date {margin-top: 8px; font-size: 24px; line-height: 33px; color: rgba(255,255,255,0.4); font-weight: 700; letter-spacing: -1px;}
    section.cont06 .text em {color: #FFFC00;}
    section.cont06 .img-wrap {position: relative; width: 100%; padding-top: 100%; margin-top: 60px;}
    section.cont06 .img-wrap .img-list {position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; display: grid; grid-template-columns:repeat(3, 3fr); grid-template-rows:repeat(3, 3fr); gap: 16px;}
    section.cont06 .img-wrap .img-item {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background-color: #E1CEFF;}
    section.cont06 .img-wrap img {width: 100%; height: 100%; object-fit: cover;}
    footer article {padding: 48px 0;}
    footer article.logo_acticle {padding:0 0 40px 0;}
}
@media all and (max-width: 1920px) {
    header .btn-choco {top: calc((100vw / 1920) * 26);}
    header .btn-mirean {top: calc((100vw / 1920) * 28);}
    header .challenge {font-size: calc((100vw / 1920) * 30); line-height: calc((100vw / 1920) * 42); letter-spacing: calc((100vw / 1920) * -2);}
    section.cont01 .btns {margin: 0 -30px;}
}
@media all and (min-width: 768px) and (max-width: 1304px) {
    footer article,
    section article {padding: calc((100vw / 1304) * 100) 0;}
    footer article {padding: calc((100vw / 1304) * 48) 0;}
    header article > img {max-width: calc((100vw / 1304) * 1920);}
    header .audio-controls {bottom: calc((100vw / 1304) * 38); width: calc((100vw / 1304) * 348); height: calc((100vw / 1304) * 93);}
    section.cont01 > img {max-width: calc((100vw / 1304) * 1920);}
    section.cont01 .vod {top: calc((100vw / 1304) * 314); width: calc((100vw / 1304) * 272); height: calc((100vw / 1304) * 482); border-radius: calc((100vw / 1304) * 18);}
    section.cont01 .vod .vod-btn {width: calc((100vw / 1304) * 100); height: calc((100vw / 1304) * 100);}
    section.cont01 .title {width: calc((100vw / 1304) * 577); margin-top: calc((100vw / 1304) * 32);}
    section.cont01 .img-01 {position: absolute; right: -30px; top: 208px; width: 290px; height: 218px;}
    section.cont01 .img-02 {position: absolute; left: 0; bottom: -122px; width: 265px; height: 258px;}

    section.cont01 .img-01 {right: calc((100vw / 1304) * -30); top: calc((100vw / 1304) * 200); width: calc((100vw / 1304) * 290); height: calc((100vw / 1304) * 218);}
    section.cont01 .img-02 {bottom: calc((100vw / 1304) * -122); width: calc((100vw / 1304) * 265);  height: calc((100vw / 1304) * 258);}
    section.cont02 > img {max-width: calc((100vw / 1304) * 1920);}
    section.cont03 .textBox {margin: calc((100vw / 1304) * 40) 0  calc((100vw / 1304) * 100) 0;}
    section.cont03 .textBox .con {width: calc((100vw / 1304) * 648); height: calc((100vw / 1304) * 138);}
    section.cont03 .textBox .con .tit {font-size: calc((100vw / 1304) * 40); line-height: calc((100vw / 1304) * 56);}
    section.cont03 .textBox .con .info {font-size: calc((100vw / 1304) * 24); line-height: calc((100vw / 1304) * 32);}
    section.cont03 .slides {width: 100%;}
    section.cont03 .slides .swiper-wrapper {justify-content: center; gap: calc((100vw / 1304) * 60);}
    section.cont03 .slides .swiper-slide {height: calc((100vw / 1304) * 499); width: calc((100vw / 1304) * 282);}
    section.cont03 .slides .swiper-slide .vod .vod-btn,
    section.cont03 .slides .swiper-slide a::after {width: calc((100vw / 1304) * 100); height: calc((100vw / 1304) * 100)}
    section.cont04 .tab_link {top: calc((100vw / 1304) * 275); height: calc((100vw / 1304) * 98);}
    section.cont04 .img-01 {left: calc(100% - ((100vw / 1304) * 60)); width: calc((100vw / 1304) * 372);}
    section.cont04 .img-02 {right: calc(100% - ((100vw / 1304) * 60)); width: calc((100vw / 1304) * 345);}
    section.cont05 .hash-tags {letter-spacing: calc((100vw / 1304) * -1.2);}
    section.cont05 .hash-tags .link-hash {font-size: calc((100vw / 1304) * 20); line-height: calc((100vw / 1304) * 28);}
    section.cont05 .img-01 {left: calc(100% - ((100vw / 1304) * 60)); width: calc((100vw / 1304) * 372);}
    section.cont05 .img-02 {right: calc(100% - ((100vw / 1304) * 60)); width: calc((100vw / 1304) * 345);}
    section.cont05 .btn-group {gap: calc((100vw / 1304) * 28) calc((100vw / 1304) * 20);}
    section.cont05 .link-01,
    section.cont05 .link-02 {width: calc((100vw / 1304) * 360);}
    section.cont05 .link-03 {width: calc((100vw / 1304) * 600);}

    section.cont06 .title {margin-bottom: calc((100vw / 1304) * 64);}
    section.cont06 .title img {display: block; width: calc((100vw / 1304) * 620); margin: auto;}
    /* section.cont06 .text-wrap {top: calc(15% + 0.01);} */
    section.cont06 .text {height: calc((100vw / 1304) * 257)}
    section.cont06 .text .challenge {font-size: calc((100vw / 1304) * 32); line-height: calc((100vw / 1304) * 44);}
    section.cont06 .text .point {margin-top: calc((100vw / 1304) * 8); font-size: calc((100vw / 1304) * 56); line-height: calc((100vw / 1304) * 78);}
    section.cont06 .text .date {margin-top: calc((100vw / 1304) * 8); font-size: calc((100vw / 1304) * 24); line-height: calc((100vw / 1304) * 33);}
    section.cont06 .img-wrap {margin-top: calc((100vw / 1304) * 60);}
    section.cont06 .img-wrap .img-item {border-radius: calc((100vw / 1304) * 36);}
    section.cont06 .img-wrap .img-list {gap: calc((100vw / 1304) * 16);}
}
@media all and (max-width: 767px) {
    header article {position: relative;}
    header article > img {max-width: 100%;}
    header .btn-mirean {position: absolute; left: 5%; top: calc((100vw / 360) * 20); width: 28%; padding: 4.4%;}
    header .btn-choco {position: absolute; right: 5%; top: calc((100vw / 360) * 18); width: 28%; padding: 4.8%;}
    header .challenge {display: flex; justify-content: center; position: absolute; left: 0; top: 91.5%; width: 100%; font-size: calc((100vw / 360) * 17); line-height: calc((100vw / 360) * 24); text-align:center; color: #fff; font-weight: 800; letter-spacing: -2px;}
    header .challenge em {color: #FFFC00;}
    header .audio-controls {position: absolute; left: 50%; bottom: calc((100vw / 360) * 23); transform: translateX(-50%); width: calc((100vw / 360) * 320); height: calc((100vw / 360) * 62);}
    section, footer {padding: 0px calc((100vw / 360) * 20); text-align: center;}
    footer article,
    section article {padding: calc((100vw / 360) * 60) 0px;}
    section.cont01 {position: relative; padding: 0;}
    section.cont01 article {position: absolute; left: 50%; top: 0; width:100%; height: 100%; transform: translateX(-50%);}
    section.cont01 .vod {position: absolute; left: 50%; top: 32.5%; transform: translateX(-50%); width: 70.2%; height: 56%; margin: auto; border-radius: calc((100vw / 360) * 18); overflow: hidden; background-color: #000;}
    section.cont01 .vod .vod-btn {position: absolute; left: 50%; top: 50%; width: calc((100vw / 360) * 60); height: calc((100vw / 360) * 60); transform: translate(-50%, -50%); z-index: 10;}
    section.cont01 .vod video {width: 100%; height: 100%;}
    section.cont01 .img-01 {position: absolute; left: calc((100vw / 360) * 71); bottom: calc((100vw / 360) * 42); width: calc((100vw / 360) * 52); height: calc((100vw / 360) * 74);}
    section.cont01 .img-02 {position: absolute; right: calc((100vw / 360) * 22); bottom: calc((100vw / 360) * 20); width: calc((100vw / 360) * 101); height: calc((100vw / 360) * 117);}
    /* section.cont01 .title {width: calc((100vw / 360) * 282px); margin: 32px auto 0;}
    section.cont01 .btns {position: relative; margin: 0 calc((100vw / 360) * -20);}
    section.cont01 .btns .link-01 {display: block; position: absolute; left: 0; top: 0; width: 100%; height: 50%;}
    section.cont01 .btns .link-02 {display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 50%;} */
    section.cont02 {padding: 0;}
    section.cont02 article .img-mobile + .img-mobile {margin-top: calc((100vw / 360) * 40);}
    section.cont03 article .img-mobile + .img-mobile {margin-top: calc((100vw / 360) * 60);}
    section.cont03 article {padding-bottom: calc((100vw / 360) * 40);}
    section.cont03 .textBox {margin-top: calc((100vw / 360) * 24); margin-bottom: calc((100vw / 360) * 50);}
    section.cont03 .textBox .con {position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; height: calc((100vw / 360) * 108); padding:0 calc((100vw / 360) * 66); border-radius: 100px; background-color: #340974; text-align: center; color: #fff;}
    section.cont03 .textBox .con .tit {word-break: keep-all; font-weight: 800; font-size: calc((100vw / 360) * 22); line-height: calc((100vw / 360) * 30);}
    section.cont03 .textBox .con .tit strong {display: block; color: #FFFC00;}
    section.cont03 .textBox .con .info {font-size: calc((100vw / 360) * 12); line-height: calc((100vw / 360) * 18); opacity: 0.4;}
    section.cont03 .textBox .con.case2::after {content:''; position: absolute; right: -2px; bottom: 0; display: block; width: 21.875%; height: 70%; background: url('../images/event/240711/mo/article_03_icon.png') no-repeat center center / contain;}
    section.cont03 .slides {width: 100%; margin: auto;}
    section.cont03 .slides .swiper-wrapper {display: flex;}
    section.cont03 .slides .swiper-slide {width: 100%; height: calc((100vw / 360) * 448); margin-right: 60px;}
    section.cont03 .slides .swiper-slide:last-child {margin-right: 0;}
    section.cont03 .slides .swiper-slide .vod,
    section.cont03 .slides .swiper-slide a {display: flex; position: relative; width: calc((100vw / 360) * 252); height: 100%; margin: auto; overflow: hidden; border-radius: 18px;}
    section.cont03 .slides .swiper-slide .vod video,
    section.cont03 .slides .swiper-slide a img {flex:none; width: 100%; object-fit:cover;}
    section.cont03 .slides .swiper-slide .vod::before,
    section.cont03 .slides .swiper-slide a::before {content:''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); opacity: 1; transition: all 0.2s ease;}
    section.cont03 .slides .swiper-slide .vod.is-played::before {opacity: 0;}
    section.cont03 .slides .swiper-slide .vod .vod-btn,
    section.cont03 .slides .swiper-slide a::after {content:''; display: block; position: absolute; left: 50%; top: 50%; width: calc((100vw / 360) * 60); height: calc((100vw / 360) * 60); background: url('../images/event/240711/pc/icon_vod_play.png') no-repeat center center / contain; transform: translate(-50%, -50%);}
    section.cont03 .slides .swiper-pagination {position: static; margin-top: calc((100vw / 360) * 24);}
    section.cont03 .slides .swiper-pagination .swiper-pagination-bullet {width: calc((100vw / 360) * 12); height: calc((100vw / 360) * 12); background-color: #fff;}
    section.cont03 .slides .swiper-button-prev,
    section.cont03 .slides .swiper-button-next {margin: 0; top: 50%; transform: translateY(-50%); width: calc((100vw / 360) * 24); height: calc((100vw / 360) * 24)}
    section.cont03 .slides .swiper-button-prev {left: calc((100vw / 360) * -5);}
    section.cont03 .slides .swiper-button-next {right: calc((100vw / 360) * -5);}
    section.cont03 .slides .swiper-button-next img {transform: scaleX(-1);}
    section.cont03 .slides .swiper-button-prev::after,
    section.cont03 .slides .swiper-button-next::after {display: none;}
    section.cont03 .btns {position: relative; margin: auto calc((100vw / 360) * -20); text-align: center;}
    section.cont03 .btns .link-01 {display: block; position: absolute; left: 0; top: 0; width: 100%; height: 50%;}
    section.cont03 .btns .link-02 {display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 50%;}
    section.cont04 {padding: 0;}
    section.cont04 article {padding: 0;}
    section.cont04 .tab_link {display: flex; position: absolute; left: calc((100vw / 360) * 20); right: calc((100vw / 360) * 20); top: calc((100vw / 360) * 185); height: calc((100vw / 360) * 76);}
    section.cont04 .tab_link a {display: block; height: 100%; width: 50%;}
    section.cont05 {padding: 0;}
    section.cont05 article {padding: 0;}

    section.cont05 .hash-tags {position: absolute; right: calc((100vw / 360) * 20); left: calc((100vw / 360) * 20); top: 11.7%; padding-left: 27%; text-align: left; letter-spacing: -0.5px;}
    section.cont05 .hash-tags .link-hash {display: inline-block; color: #340A78; font-size: calc((100vw / 360) * 12); line-height: calc((100vw / 360) * 18); font-weight: 700;}
    section.cont05 .btn-group {display: flex; flex-direction: column; gap: calc((100vw / 360) * 8); position: absolute; right: calc((100vw / 360) * 20); left: calc((100vw / 360) * 20); top: 57.4%;}
    section.cont05 .link-01 {display:block; width: 100%;}
    section.cont05 .link-02 {display:block; width: 100%;}
    section.cont05 .link-03 {display:block; width: 100%;}

    section.cont06 .title {width: calc((100vw / 360) * 198); margin: 0 auto calc((100vw / 360) * 24) auto;}
    section.cont06 .text-wrap {position: relative; height: calc((100vw / 360) * 152); margin-bottom: calc((100vw / 360) * 24); color: #fff; word-break: break-all;}
    section.cont06 .text-wrap .text {position: absolute; left: 0; top: 0; width: 100%; padding: 0 20%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
    section.cont06 .text-wrap .challenge {font-size: calc((100vw / 360) * 14); line-height: calc((100vw / 360) * 20); font-weight: 700;}
    section.cont06 .text-wrap .point {margin-top: calc((100vw / 360) * 4); font-size: calc((100vw / 360) * 22); line-height: calc((100vw / 360) * 30); font-weight: 800;}
    section.cont06 .text-wrap .date {margin-top: calc((100vw / 360) * 6);  font-size: calc((100vw / 360) * 10); line-height: calc((100vw / 360) * 14); color: rgba(255,255,255,0.4); font-weight: 700;}
    section.cont06 .text-wrap em {display: inline-block; color: #FFFC00;}
    section.cont06 .img-wrap {position: relative; width: 100%; padding-top: 100%;}
    section.cont06 .img-wrap .img-list {position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; display: grid; grid-template-columns:repeat(3, 3fr); grid-template-rows:repeat(3, 3fr); gap: 3px;}
    section.cont06 .img-wrap .img-item {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 9px; overflow: hidden; background-color: #E1CEFF;}
    section.cont06 .img-wrap img {width: 100%; height: 100%; object-fit: cover;}
    footer article {padding: 40px 0;}
    footer article.logo_acticle {width: calc((100vw / 360) * 98); margin: auto; padding: 0 0 40px 0;}
}