일반

<link href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<style type="text/css">
	/* base | 필요시 적절하게 수정해서 사용해주세요. */
	.evt {
		opacity: 0;
		position: relative;
		z-index: 0;
	}
	.evt.on {
		opacity: 1;
	}
	.evt img {
		display: block;
		border: 0;
		padding: 0;
		margin: 0;
		width: 100%;
	}
	.evt a,
	.evt button {
		-webkit-tap-highlight-color: transparent;
		display: block;
	}
	.evt a:focus,
	.evt button:focus {
		outline: none;
	}
	.evt .abs {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;
	}
	.swiper-button-next:after,
	.swiper-button-prev:after {
		display: none;
	}
	body header.hide {
		visibility: hidden;
	}
	body.scroll-up header.hide {
		visibility: visible;
	}
	body.scroll-bottom header.hide {
		visibility: visible;
	}

	/* SECTION COMMON */
	.evt .section {
		position: relative;
		width: 100%;
		overflow: hidden;
	}
	.evt .bg {
		background-color: #f8f8f8;
	}
	.evt .cont {
		position: relative;
		padding: 11.56vw 0 10.67vw 0;
		margin: 0 auto;
		text-align: center;
	}
	.evt .section .tit {
		display: block;
		margin-bottom: 8.89vw; /* 100px */
		font-size: 6.4vw; /* 72px */
		font-weight: 600;
		text-align: center;
	}

	.evt .cont .swiper-slide {
		pointer-events: unset;
	}
	.evt .cont .swiper-slide.swiper-slide-active {
		z-index: 1;
	}

	/* SWIPER SLIDER */
	.evt .evt_slider_wrap {
		position: relative;
	}
	.evt .evt_slider_wrap .evt_slider {
		overflow: hidden;
	}
	.evt .evt_slider_wrap img {
		width: 100%;
	}
	.evt .evt_slider_wrap .evt_slider .swiper-wrapper {
		height: fit-content;
	}
	.evt .evt_slider_wrap .swiper-pagination {
		position: absolute;
		left: 0;
		bottom: calc(204 / 750 * 100vw);
		width: 100%;
		font-size: 0;
	}
	.evt .evt_slider_wrap .swiper-pagination span {
		/* border-radius: unset; */
		margin: 0 calc(8 / 750 * 100vw);
		width: calc(16 / 750 * 100vw);
		height: calc(16 / 750 * 100vw);
		background: #e8e8e8;
		opacity: 1;
	}
	.evt .evt_slider_wrap .swiper-pagination span.swiper-pagination-bullet-active {
		background: #bcbcbc;
		opacity: 1;
	}

	/* ------------------------------------ */

	/* 섹션별 */
	.evt .sec01 .benefit {
		padding: 0 5.35vw;
	}
	.evt .sec01 .benefit .inner {
		padding: 11.1vw 0 10.6vw 0;
		margin-top: 10.67vw;
		width: 100%;
		text-align: center;
		background-color: #f8f8f8;
		border-radius: 3vw;
	}
	.evt .sec01 .benefit .text {
		margin-top: 6.64vw;
		font-size: 3.73vw;
		font-weight: 300;
		line-height: 1.6;
	}
	.evt .sec01 .benefit .text strong {
		display: block;
		font-size: 4.27vw;
		font-weight: 600;
	}
	.evt .sec01 .coupon {
		position: relative;
		margin: 0 auto;
		padding: 5.1vw 8.89vw;
		width: 58.756vw; /* 661px */
		text-align: left;
		font-size: 2.57vw;
		font-weight: 400;
		color: #fff;
		background: #282828;
	}
	.evt .sec01 .coupon:before,
	.evt .sec01 .coupon:after {
		content: "";
		display: inline-block;
		width: 4.8vw; /* 54px */
		height: 4.8vw;
		background-color: #f8f8f8;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
	.evt .sec01 .coupon:before {
		left: -2.4vw;
	}
	.evt .sec01 .coupon:after {
		right: -2.4vw;
	}
	.evt .sec01 .coupon .percent {
		padding-top: 2vw;
		color: #fff;
		font-size: 9vw;
		line-height: 1.2;
		font-weight: 500;
		font-family: "PlusJakartaSans", sans-serif;
		letter-spacing: 1.5;
	}
	.evt .sec01 .coupon .percent small {
		font-size: 0.6em;
	}

	.evt .sec03 {
		padding: 0 5.42vw;
		text-align: center;
	}
	.evt .sec03 .btn-review {
		display: inline-block;
		margin-bottom: 10.67vw;
		width: 100%;
	}

	/* notice */
	.notice {
		background-color: #f2f2f2;
	}
	.notice .notice-header {
		position: relative;
		margin: 9.2vw 0 8.89vw 0;
		padding: 0 5.244vw;
		text-align: center;
		cursor: pointer;
	}
	.notice .notice-title {
		width: 100%;
		font-size: 4.48vw;
		font-weight: 500;
	}
	.notice .arrow-icon {
		position: absolute;
		top: 3.3vw;
		right: 5.244vw;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 4.26vw;
		height: 4.26vw;
	}
	.notice .arrow-icon.arrow-icon-down {
		margin-top: -2.6vw;
		transform: rotate(0deg);
		transition: transform 0.3s ease-in-out;
	}
	.notice .arrow-icon.arrow-icon-up {
		margin-top: -1vw;
		transform: rotate(180deg);
		transition: transform 0.3s ease-in-out;
	}
	.notice .arrow-icon .arrow {
		display: block;
		width: 3.36vw;
		height: 3.36vw;
		border-top: 2px solid #000;
		border-left: 2px solid #000;
		transform: rotate(225deg);
	}

	#notice-content {
		display: block;
	}
	#notice-content.notice-content-hide {
		display: none;
	}

	.notice-list {
		padding: 0 5.6vw 15.6vw 5.6vw;
		margin: 0 auto;
		width: fit-content;
	}
	.notice-list li {
		margin-top: 2.4vw;
		padding-left: 18px;
		list-style-type: none;
		font-size: 3.73vw;
		font-weight: 300;
		line-height: 1.4;
		color: #505050;
		word-break: keep-all;
	}
	.notice-list > li::before {
		display: inline-block;
		content: "-";
		padding-right: 5px;
		margin-left: -18px;
	}
	.notice-list ul li {
		margin-top: 0;
		padding-left: 28px;
		color: #787878;
	}
	.notice-list ul li::before {
		display: inline-block;
		content: "·";
		padding-right: 5px;
		margin-left: -20px;
	}
</style>
<script>
	// 레이아웃이 자리잡기 전에 컨텐츠가 먼저 노출되어 덜컹 거리는 현상 방지
	$(document).ready(function () {
		setTimeout(function () {
			$("#evt_container").addClass("on");
		}, 1000);
	});
	$(window).on("load", function () {
		$("#evt_container").addClass("on");
	});

	$(document).ready(function () {
		// sec02 페이드인 슬라이드1
		var sec02FadeSlider1 = new Swiper(".evt .sec02 .fadeIn-slider .evt_slider", {
			slidesPerView: "auto",
			effect: "fade",
			fadeEffect: { crossFade: true },
			centeredSlides: true,
			loop: true,
			speed: 1000,
			autoplay: {
				delay: 2000,
				disableOnInteraction: false,
			},
			pauseOnMouseEnter: false,
			allowTouchMove: true,
			pagination: {
				el: ".evt .sec02 .fadeIn-slider .swiper-pagination",
				clickable: true,
			},
			on: {
				realIndexChange: function () {
					sessionStorage.setItem("sec02FadeSlider1", this.realIndex);
				},
			},
		});

		$(document).on("touchend", function () {
			sec02FadeSlider1.autoplay.start();
		});

		document.addEventListener("visibilitychange", function () {
			if ("visible" === document.visibilityState) {
				setTimeout(() => {
					sec02FadeSlider1.autoplay.destroy();

					sec02FadeSlider1 = new Swiper(".evt .sec02 .fadeIn-slider .evt_slider", {
						slidesPerView: "auto",
						effect: "fade",
						fadeEffect: { crossFade: true },
						centeredSlides: true,
						loop: true,
						speed: 3000,
						autoplay: {
							delay: 2000,
							disableOnInteraction: false,
						},
						pauseOnMouseEnter: false,
						allowTouchMove: true,
						pagination: {
							el: ".evt .sec02 .fadeIn-slider .swiper-pagination",
							clickable: true,
						},
						on: {
							realIndexChange: function () {
								sessionStorage.setItem("sec02FadeSlider1", this.realIndex);
							},
						},
					});

					sec02FadeSlider1.slideToLoop(Number(sessionStorage.getItem("sec02FadeSlider1")), 0, false);
				}, 100);
			}
		});

		// resize 후 슬라이드 멈춤 방지
		var resizeEnd = () => {
			sec02FadeSlider1.autoplay.stop();
			sec02FadeSlider1.autoplay.start();
		};

		var doit;
		window.addEventListener("resize", () => {
			clearTimeout(doit);
			doit = setTimeout(resizeEnd, 100);
		});

		// slider 위치 기억
		sec02FadeSlider1.slideToLoop(Number(sessionStorage.getItem("sec02FadeSlider1")), 0, false);
	});
</script>

<div class="evt" id="evt_container">
	<div class="section sec_top">
		<h1><img class="img" alt="멤버십 고객님들을 위한 REVIEW BENEFIT" src="https://static.discovery-expedition.com/motioneye/promotion/24_0327_review_guide/mo/top.jpg" /></h1>
	</div>
	<div class="section sec01">
		<div class="cont">
			<h2 class="tit">리뷰 작성 혜택</h2>
			<img alt="포토/동영상 리뷰 작성 시 1,000M 텍스트리뷰 작성 시 500M" src="https://static.discovery-expedition.com/motioneye/promotion/24_0327_review_guide/mo/mileage.jpg" />
			
		</div>
	</div>
	<div class="section sec02 bg">
		<div class="cont">
			<h2 class="tit">리뷰 작성 방법</h2>
			<div class="swiper-container evt_slider_wrap fadeIn-slider swiper-slider">
				<div class="evt_slider">
					<ul class="swiper-wrapper">
						<li class="swiper-slide">
							<img alt="1.로그인 후 마이페이지 > 작성가능 리뷰 선택" src="https://static.discovery-expedition.com/motioneye/promotion/24_0327_review_guide/mo/review_howto01.jpg" />
						</li>
						<li class="swiper-slide">
							<img alt=" 2.작성할 리뷰 선택" src="https://static.discovery-expedition.com/motioneye/promotion/24_0327_review_guide/mo/review_howto02.jpg" />
						</li>
						<li class="swiper-slide">
							<img alt="3.착장사진, 동영상, 별점과 함께 솔직 리뷰 작성하고 적립금 받기" src="https://static.discovery-expedition.com/motioneye/promotion/24_0327_review_guide/mo/review_howto03.jpg" />
						</li>
					</ul>
				</div>

				<div class="swiper-pagination">&nbsp;</div>
			</div>
		</div>
	</div>
	<div class="section sec03">
		<div class="cont">
			<h2 class="tit">리뷰 작성 TIP</h2>
			<img
				alt="1.구매하신 상품의 착장 포토/동영상을 다양하게 올려주세요 2.디스커버리와 함께한 라이프 스타일을 공유해주세요 3.사이즈, 핏, 소재 등 디테일한 리뷰를 남겨주세요."
				src="https://static.discovery-expedition.com/motioneye/promotion/24_0327_review_guide/mo/review_tip.jpg"
			/>
			<a class="btn-review" href="#n" role="button" onclick="onClickLinkButton('/mypage')"
				><img alt="리뷰 작성 바로가기" src="https://static.discovery-expedition.com/motioneye/promotion/24_0327_review_guide/mo/btn_review.jpg"
			/></a>
		</div>
	</div>

	
	<div id="notice" class="notice bg">
		<div class="section">
			<div id="notice-header" class="notice-header">
				<p class="notice-title">NOTICE</p>
				<div id="arrow-icon" class="arrow-icon arrow-icon-down"><span class="arrow"></span></div>
			</div>

			<div id="notice-content" class="width-full notice-content notice-content-hide">
				<ul class="notice-list">
					<li>
						리뷰 작성 시 온/오프라인에서 사용 가능한 마일리지를 적립해 드립니다.<br />
						(포토, 동영상 리뷰 1,000M/텍스트 리뷰 500M)
					</li>
					<li>구매 확정 후 90일 이내 리뷰 작성이 가능하며, 리뷰 마일리지는 작성 후 2시간 단위로 자동 지급됩니다.</li>
					<li>같은 주문 내에서 동일 상품을 2개 이상 구매하시더라도 상품 리뷰 작성은 1회만 가능합니다.</li>
					<li>리뷰 작성 후 적립된 마일리지는 최종 구매일로부터 2년간 유효합니다.</li>
					<li>작성하신 리뷰는 마케팅 목적으로 사용될 수 있습니다.</li>
					<li>
						다음과 같은 경우 리뷰가 제한되거나 관리자의 권한으로 삭제될 수 있습니다
						<ul>
							<li>상품과 적합하지 않은 콘텐츠나 무관한 사진 업로드</li>
							<li>사이트 내 게시된 상품 및 전시 이미지 그대로 사용</li>
							<li>타 회원의 리뷰 도용</li>
							<li>내용이 부적합하거나 비속어 사용</li>
							<li>약관 및 법률에 위배되는 내용</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
	
</div>
<script>
	document.addEventListener("DOMContentLoaded", function () {
		handleContainerResize();
		handleOnClickNotice();
	});

	function handleContainerResize() {
		function sendHeightToParent() {
			const visualArea = document.querySelector("#evt_container");
			if (visualArea) {
				const containerHeight = visualArea.scrollHeight;
				window.parent.postMessage({ action: "onResizeContentHeight", iframeHeight: containerHeight }, "*");
			}
		}

		function handleVisualAreaResize() {
			sendHeightToParent();
		}

		const resizeObserver = new ResizeObserver((entries) => {
			for (let entry of entries) {
				const newHeight = entry.contentRect.height;
				sendHeightToParent();
			}
		});

		const noticeContent = document.querySelector("#notice-content");
		if (noticeContent) {
			resizeObserver.observe(noticeContent);
		}

		sendHeightToParent();

		window.addEventListener("resize", handleVisualAreaResize);
	}

	function handleOnClickNotice() {
		const noticeHeader = document.querySelector("#notice-header");
		const noticeContent = document.querySelector("#notice-content");
		const arrowIcon = document.querySelector("#arrow-icon");

		noticeHeader.addEventListener("click", function () {
			if (noticeContent.classList.contains("notice-content-hide")) {
				noticeContent.classList.remove("notice-content-hide");
				arrowIcon.classList.remove("arrow-icon-down");
				arrowIcon.classList.add("arrow-icon-up");

				const offsetTop = noticeContent.getBoundingClientRect().top;
				setTimeout(() => {
					window.parent.scroll({
						top: offsetTop,
						behavior: "smooth",
					});
				}, 30);
			} else {
				noticeContent.classList.add("notice-content-hide");
				arrowIcon.classList.remove("arrow-icon-up");
				arrowIcon.classList.add("arrow-icon-down");
			}
		});
	}

	function onClickLinkButton(url) {
		window.parent.postMessage({ action: "onClickLink", url }, "*");
	}
</script>

<style type="text/css">
	/* base | 필요시 적절하게 수정해서 사용해주세요. */
	.contain {
		padding-bottom: 0;
	}
	.location-container {
		display: none;
	}
	.visual-area {
		margin: 0;
	}
	.evt {
		position: relative;
		width: 100%;
		text-align: left;
		opacity: 0;
		overflow: hidden;
	}
	.evt.on {
		opacity: 1;
	}
	.evt img {
		display: block;
		width: 100%;
	}
	.evt a:focus,
	.evt button:focus {
		outline: none;
	}

	/* SECTION COMMON */
	.evt .section {
		position: relative;
	}
	.evt .bg {
		background-color: #f8f8f8;
	}
	.evt .cont {
		position: relative;
		padding: 4.55vw 0;
		margin: 0 auto;
		width: 61.08vw;
		text-align: center;
	}
	.evt .section .tit {
		display: block;
		margin-bottom: 3.4vw;
		font-size: 1.82vw; /* 64px */
		font-weight: 600;
		text-align: center;
	}
	/* ------------------------------------ */

	/* 섹션별 */
	.evt .sec_top img {
		margin: 0 auto;
		width: 100vw;
	}
	.evt .sec01 .benefit {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 4.545vw 3.579vw;
		margin: 0 auto;
		width: 45.45vw;
		text-align: left;
		background-color: #f8f8f8;
		border-radius: 6px;
	}
	.evt .sec01 .benefit .text {
		font-size: 0.795vw;
		line-height: 1.5;
	}
	.evt .sec01 .benefit .text strong {
		display: block;
		font-size: 1.363vw;
		font-weight: 600;
	}
	.evt .sec01 .coupon {
		padding: 1.42vw 2.27vw;
		width: 15.34vw;
		height: 7.3vw;
		color: #fff;
		font-size: 0.68vw;
		font-weight: 400;
		background: url("https://static.discovery-expedition.com/motioneye/promotion/24_0327_review_guide/pc/coupon.png") no-repeat 0 0;
		background-size: cover;
	}
	.evt .sec01 .coupon .percent {
		color: #fff;
		font-size: 2vw;
		line-height: 1.4;
		font-weight: 700;
	}
	.evt .sec03 {
		text-align: center;
	}
	.evt .sec03 .btn-review {
		display: inline-block;
		margin-bottom: 3.41vw;
		width: 29.55vw;
	}

	/* notice */
	.notice .notice-header,
	.notice .notice-content {
		margin: 0 auto;
		padding: 0 6.193vw;
		width: 61.08vw;
	}
	.notice .notice-header {
		position: relative;
		padding: 3.2vw 0 2.98vw 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		cursor: pointer;
	}
	.notice .notice-title {
		width: 100%;
		text-align: center;
		font-size: 1.59vw; /* 53px */
		font-weight: 600;
		letter-spacing: 1;
	}
	.notice .arrow-icon {
		position: absolute;
		top: 3.3vw;
		right: 1.732vw;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 1.7vw;
		height: 1.7vw;
	}
	.notice .arrow-icon.arrow-icon-down {
		margin-top: -0.2vw;
		transform: rotate(0deg);
		transition: transform 0.3s ease-in-out;
	}
	.notice .arrow-icon.arrow-icon-up {
		margin-top: 0.2vw;
		transform: rotate(180deg);
		transition: transform 0.3s ease-in-out;
	}
	.notice .arrow-icon .arrow {
		display: block;
		width: 0.9vw; /* 31.890px */
		height: 0.9vw; /* 31.890px */
		border-top: 2px solid #000;
		border-left: 2px solid #000;
		transform: rotate(225deg);
	}

	.notice-list {
		padding: 0 0 6.8vw 0;
		margin: 0 auto;
	}
	.notice-list li {
		margin-top: 0.6vw;
		padding-left: 14px;
		list-style-type: none;
		line-height: 1.5;
		font-size: 1.136vw; /* 40px */
		font-weight: 300;
		color: #505050;
	}
	.notice-list > li::before {
		display: inline-block;
		content: "-";
		padding-right: 5px;
		margin-left: -14px;
	}
	.notice-list ul li {
		margin-top: 0;
		padding-left: 12px;
		color: #787878;
	}
	.notice-list ul li::before {
		display: inline-block;
		content: "·";
		padding-right: 5px;
		margin-left: -12px;
	}

	.notice-content {
		display: block;
	}
	.notice-content.notice-content-hide {
		display: none;
	}
</style>
<script>
	// 레이아웃이 자리잡기 전에 컨텐츠가 먼저 노출되어 덜컹 거리는 현상 방지
	$(document).ready(function () {
		setTimeout(function () {
			$("#evt_container").addClass("on");
		}, 1000);
	});
	$(window).on("load", function () {
		$("#evt_container").addClass("on");
	});
</script>

<section class="evt" id="evt_container">
	<div class="section sec_top">
		<h1><img class="img" alt="멤버십 고객님들을 위한 REVIEW BENEFIT" src="https://static.discovery-expedition.com/motioneye/promotion/24_0327_review_guide/pc/top.jpg" /></h1>
	</div>
	<div class="section sec01">
		<div class="cont">
			<h2 class="tit">리뷰 작성 혜택</h2>
			<img alt="포토/동영상 리뷰 작성 시 1,000M 텍스트리뷰 작성 시 500M" src="https://static.discovery-expedition.com/motioneye/promotion/24_0327_review_guide/pc/mileage.png" />
			
		</div>
	</div>
	<div class="section sec02 bg">
		<div class="cont">
			<h2 class="tit">리뷰 작성 방법</h2>
			<img
				alt="1.로그인 후 마이페이지 > 작성가능 리뷰 선택 2.작성할 리뷰 선택 3.착장사진, 동영상, 별점과 함께 솔직 리뷰 작성하고 적립금 받기"
				src="https://static.discovery-expedition.com/motioneye/promotion/24_0327_review_guide/pc/review_howto.png"
			/>
		</div>
	</div>
	<div class="section sec03">
		<div class="cont">
			<h2 class="tit">리뷰 작성 TIP</h2>
			<img
				alt="1.구매하신 상품의 착장 포토/동영상을 다양하게 올려주세요 2.디스커버리와 함께한 라이프 스타일을 공유해주세요 3.사이즈, 핏, 소재 등 디테일한 리뷰를 남겨주세요."
				src="https://static.discovery-expedition.com/motioneye/promotion/24_0327_review_guide/pc/review_tip.png"
			/>
			<a class="btn-review" href="#n" role="button" onclick="onClickLinkButton('/mypage')"
				><img alt="리뷰 작성 바로가기" src="https://static.discovery-expedition.com/motioneye/promotion/24_0327_review_guide/pc/btn_review.png"
			/></a>
		</div>
	</div>

	
	<div id="notice" class="section notice bg">
		<div class="section">
			<div id="notice-header" class="notice-header">
				<p class="notice-title">NOTICE</p>
				<div id="arrow-icon" class="arrow-icon arrow-icon-down"><span class="arrow"></span></div>
			</div>

			<div id="notice-content" class="width-full notice-content notice-content-hide">
				<ul class="notice-list">
					<li>
						리뷰 작성 시 온/오프라인에서 사용 가능한 마일리지를 적립해 드립니다.<br />
						(포토, 동영상 리뷰 1,000M/텍스트 리뷰 500M)
					</li>
					<li>구매 확정 후 90일 이내 리뷰 작성이 가능하며, 리뷰 마일리지는 작성 후 2시간 단위로 자동 지급됩니다.</li>
					<li>같은 주문 내에서 동일 상품을 2개 이상 구매하시더라도 상품 리뷰 작성은 1회만 가능합니다.</li>
					<li>리뷰 작성 후 적립된 마일리지는 최종 구매일로부터 2년간 유효합니다.</li>
					<li>작성하신 리뷰는 마케팅 목적으로 사용될 수 있습니다.</li>
					<li>
						다음과 같은 경우 리뷰가 제한되거나 관리자의 권한으로 삭제될 수 있습니다
						<ul>
							<li>상품과 적합하지 않은 콘텐츠나 무관한 사진 업로드</li>
							<li>사이트 내 게시된 상품 및 전시 이미지 그대로 사용</li>
							<li>타 회원의 리뷰 도용</li>
							<li>내용이 부적합하거나 비속어 사용</li>
							<li>약관 및 법률에 위배되는 내용</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
	
</section>
<script>
	document.addEventListener("DOMContentLoaded", function () {
		handleContainerResize();
		handleOnClickNotice();
	});

	function handleContainerResize() {
		function sendHeightToParent() {
			const visualArea = document.querySelector("#evt_container");
			if (visualArea) {
				const containerHeight = visualArea.scrollHeight;
				window.parent.postMessage({ action: "onResizeContentHeight", iframeHeight: containerHeight }, "*");
			}
		}

		function handleVisualAreaResize() {
			sendHeightToParent();
		}

		const resizeObserver = new ResizeObserver((entries) => {
			for (let entry of entries) {
				const newHeight = entry.contentRect.height;
				sendHeightToParent();
			}
		});

		const noticeContent = document.querySelector("#notice-content");
		if (noticeContent) {
			resizeObserver.observe(noticeContent);
		}

		sendHeightToParent();

		window.addEventListener("resize", handleVisualAreaResize);
	}

	function handleOnClickNotice() {
		const noticeHeader = document.querySelector("#notice-header");
		const noticeContent = document.querySelector("#notice-content");
		const arrowIcon = document.querySelector("#arrow-icon");

		noticeHeader.addEventListener("click", function () {
			if (noticeContent.classList.contains("notice-content-hide")) {
				noticeContent.classList.remove("notice-content-hide");
				arrowIcon.classList.remove("arrow-icon-down");
				arrowIcon.classList.add("arrow-icon-up");

				const offsetTop = noticeContent.getBoundingClientRect().top;
				setTimeout(() => {
					window.parent.scroll({
						top: offsetTop,
						behavior: "smooth",
					});
				}, 30);
			} else {
				noticeContent.classList.add("notice-content-hide");
				arrowIcon.classList.remove("arrow-icon-up");
				arrowIcon.classList.add("arrow-icon-down");
			}
		});
	}

	function onClickLinkButton(url) {
		window.parent.postMessage({ action: "onClickLink", url }, "*");
	}
</script>