<!DOCTYPE HTML>
<html xml:lang="ko" lang="ko">
<head>
<title>칸 라이언즈</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi"/>
<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-title" content="칸 국제광고제 한국 공식 사무국, A&amp;F Korea" />
<meta name="description" content="칸 국제광고제 한국 공식 사무국 에서 다양한 컨텐츠를 만나 보세요" />
<meta property="og:title" content="칸 라이언즈">
<meta property="og:url" content="http://www.canneslions.co.kr">
<meta property="og:image" content="http://www.canneslions.co.kr/img/common/noImg.gif">
<meta property="og:description" content="칸 국제광고제 한국 공식 사무국 에서 다양한 컨텐츠를 만나 보세요" />
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="칸 라이언즈">
<meta name="twitter:url" content="http://www.canneslions.co.kr">
<meta name="twitter:image" content="http://www.canneslions.co.kr/img/common/noImg.gif">
<meta name="twitter:description" content="칸 국제광고제 한국 공식 사무국 에서 다양한 컨텐츠를 만나 보세요" />

<!-- <link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/images/favicon/android-icon-192x192.png">
<link rel="shortcut icon" href="/images/favicon/favicon.ico" type="image/x-icon">
<link rel="icon" href="/images/favicon/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon-precomposed" href="app_icon.png">
<link rel="apple-touch-startup-image" href="startup.png"> -->

<link rel="apple-touch-icon" sizes="57x57" href="/images/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/images/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/images/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/images/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/images/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/images/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/images/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/images/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/images/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/images/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon/favicon.ico">
<link rel="manifest" href="/images/favicon/manifest.json">



<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
	integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous"
>
<!--     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"> -->

<link rel="stylesheet" href="/assets/css/common.css?20260325">
<link rel="stylesheet" href="/assets/css/layout.css?20251028">
<link rel="stylesheet" href="/assets/css/slick.css">
<link rel="stylesheet" href="/assets/css/slick-theme.css?231023">

<link href="/common/lib/css/colorbox.css" type="text/css" rel="stylesheet" />
<link href="/assets/css/jquery.dropdown.css" type="text/css" rel="stylesheet" />

<script src="/assets/js/prefixfree.min.js"></script>
<script src="/assets/js/jquery-1.12.4.min.js"></script>
<script src="/assets/js/jquery-migrate-1.4.1.min.js"></script>
<script src="/assets/js/common.js"></script>
<script src="/assets/js/gnb.js"></script>
<script src="/assets/js/slick.min.js"></script>
<script src="/assets/js/tailwindcss.js"></script><!-- 유튜브영상 30주년인터뷰 -->

<script type="text/javascript" src="/common/lib/js/jquery/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="/assets/js/jquery.dropdown.min.js"></script>

<style>


*:focus, *:active {
	outline: none;
	background-image: transparent;
}

.covid_info div, .covid_info ul li i:before, .covid_info ul li i:after {
	transition: all 0.25s ease-in-out;
}

.covid_info>ul li {
	animation: coviddown 0.5s ease both;
}

.no-select, .covid_tit {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	padding-left: 26px;
}

.covid_info {
	width: 92%;
	min-height: 0;
	display: inline-block;
	position: relative;
	left: 50%;
	margin: 4px auto;
	transform: translate(-50%, 0);
	max-width: 1200px;
	padding: 10px 4% 2px;
}

.covid_info>span.info_icon {
	position: absolute;
	top: 20px;
	z-index: 1;
}

@media ( max-width : 550px) {
	.covid_info {
		box-sizing: border-box;
		transform: translate(0, 0);
		max-width: 100%;
		min-height: 100%;
		margin: 0;
		left: 0;
		width: 100%;
	}
}

.covid_tit {
	font-size: 1.2rem;
	line-height: 34px;
	font-weight: 700;
	letter-spacing: -1px;
	display: block;
	background-color: #fff;
	margin: 0;
	cursor: pointer;
	position: relative;
}

.covid_tit>span {
	display: inline-block;
	position: relative;
	top: 8px;
}

.covid_info div {
	color: #0F0E3C;
	font-size: .95rem;
	line-height: 26px;
	letter-spacing: 2px;
	position: relative;
	overflow: hidden;
	height: auto;
	opacity: 1;
	transform: translate(0, 0);
	margin-top: 12px;
	z-index: 2;
	border-top: 1px dotted #dce7eb;
	padding-top: 12px;
	font-weight: 600;
}

.covid_info>ul {
	list-style: none;
	perspective: 900;
	padding: 0;
	margin: 0;
}

.covid_info>ul li {
	position: relative;
	padding: 0;
	margin: 0;
	padding-bottom: 4px;
}

.covid_info>ul li:nth-of-type(1) {
	animation-delay: 0.5s;
}

.covid_info>ul li:nth-of-type(2) {
	animation-delay: 0.75s;
}

.covid_info>ul li:nth-of-type(3) {
	animation-delay: 1s;
}

.covid_info>ul li:last-of-type {
	padding-bottom: 0;
}

.covid_info>ul li i {
	position: absolute;
	transform: translate(-6px, 0);
	margin-top: 16px;
	right: 0;
	z-index: 1;
}

.covid_info>ul li i:before, .covid_info>ul li i:after {
	content: "";
	position: absolute;
	background-color: #0F0E3C;
	width: 3px;
	height: 9px;
	top: -3px;
}

.covid_info>ul li i:before {
	transform: translate(-2px, 0) rotate(45deg);
}

.covid_info>ul li i:after {
	transform: translate(2px, 0) rotate(-45deg);
}

.covid_info>ul li input[type=checkbox] {
	position: absolute;
	cursor: pointer;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	outline: none;
}

.covid_info>ul li input[type=checkbox]:checked ~ div {
	margin-top: 0;
	max-height: 0;
	opacity: 0;
	transform: translate(0, 50%);
	outline: none;
}

.covid_info>ul li input[type=checkbox]:checked ~ i:before {
	transform: translate(2px, 0) rotate(45deg);
	outline: none;
}

.covid_info>ul li input[type=checkbox]:checked ~ i:after {
	transform: translate(-2px, 0) rotate(-45deg);
	outline: none;
}

/* @
keyframes coviddown { 0% {
	opacity: 0;
	transform-origin: top center;
	transform: rotateX(-90deg);
}

5%
{
opacity
:

1;
}
80%
{
transform
:

rotateX
(8deg);


}
83%
{
transform
:

rotateX
(6deg);


}
92%
{
transform
:

rotateX
(-3deg);


}
100%
{
transform-origin
:

top

center
;


transform
:

rotateX
(0deg);


}
} */
.tie {
	background: #0F0E3C;
}

/*201109 _LIONS Live video*/
.video-container {
	position: relative;
	/*
            padding-bottom: 30.25%;
            padding-top: 30px;
            */
	height: 100%;
	min-height: 300px;
	overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed
	{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video_wrap {
	overflow: hidden;
	padding: 40px 0;
}

.video_wrap .video_box {
	float: left;
	width: 50%;
	min-height: 300px;
}

.video_wrap .video_text {
	float: right;
	width: calc(100% - 50%);
}

.video_wrap .video_text>div {
	width: calc(100% - 60px);
	padding-left: 60px;
	text-align: justify;
}

.video_wrap .video_text h3 {
	padding: 0 0 15px 0 !important;
	text-align: left;
	font-weight: bolder;
}

.video_wrap .video_text h3 span {
	font-weight: lighter;
	font-size: 1.2rem;
	position: relative;
	color: #009FDB;
}

.video_wrap .video_text p {
	width: calc(100% -60px);
	line-height: 1.85rem;
}

.btn_bind {
	min-width: 100%;
	margin: 30px auto;
}

.info_bar {
	width: 100%;
	margin: 0 auto;
	background: #638687;
	/*#0F0E3C*/
}

.info_bar ul {
	overflow: hidden;
	padding: 60px 0;
}

.info_bar ul li {
	width: 33.33%;
	float: left;
}

.info_bar ul li>div {
	position: relative;
	overflow: hidden;
	width: 100%;
	color: #fff;
}

.info_bar ul li>div p {
	font-size: 1.125rem;
}

.info_bar ul li div .info_cell_number {
	float: left;
	text-align: left;
	font-size: 4rem;
	font-weight: bold;
	padding: 10px 30px 15px 0;
	width: fit-content;
}

.info_bar ul li div .info_cell_number small {
	position: relative;
	font-size: 1rem;
	bottom: -15px;
	opacity: .4;
}

.info_bar ul li div .info_cell_short {
	position: relative;
}

.info_bar ul li div .info_cell_short p {
	padding-top: 12px;
}

/* visual img */
.slick-slide {
	position: relative;
}

div.visual_txt {
	text-align: center;
	font-family: 'futura';
	position: absolute;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -525px;
	margin-top: -76px;
}

div.visual_txt>p {
	color: orangered;
	font-size: 3em;
	font-weight: bold;
	text-shadow: 0 0 1em #000
}

div.visual_txt>p>span {
	display: block;
	color: #fff;
	font-size: 1.4em;
	font-weight: bolder;
}

div.visual a.home {
	position: absolute;
	z-index: 1;
	display: block;
	color: #fff;
	font-size: .9em;
	right: 10px;
	top: 10px;
	border: 1px solid rgba(255, 255, 255, .8);
	font-family: 'futura';
	text-transform: uppercase;
	padding: 10px
}

div.visual_txt_ylc {
	margin-left: -323px
}

p.ylc_point {
	font-family: 'Noto Sans CJK KR' !important;
	font-size: 2.65rem !important;
	text-shadow: 1px 1px 1.2rem #000 !important;
	line-height: 4.85rem;
}

p.ylc_point span {
	font-size: 1.395em !important;
	display: block;
}

p.ylc_point>a {
	display: block;
	text-align: center;
	color: #fff;
}

.m_hidden {
	display: inline-block;
	padding-right: 6px;
	background: rgba(250, 250, 250, .40);
}

/*footer에 tailwindcss.js 미적용처리*/

.a_f_address .f_logo{
    margin: 0 20px;
}

.newsletter_link{
    box-sizing: content-box;
}
/* /footer tailwindcss.js 미적용처리*/

/* 와이드 pc */
@media screen and (max-width:1400px) {
	.video_wrap .video_text>div {
		width: calc(100% - 80px);
		padding: 0 40px;
	}
}

/* 일반 pc */
@media screen and (max-width:1280px) {
	div.visual>a {
		right: 100px;
	}
	div.visual_txt {
		margin-left: -338px;
		margin-top: -51px;
	}
	div.visual_txt p {
		font-size: 2rem;
	}
	div.visual_txt p span {
		font-size: 3.1rem;
	}
	.info_bar ul li>div {
		width: calc(100% - 60px);
		padding: 0 0 0 60px;
	}
	p.ylc_point {
		font-size: 2.45rem !important;
		line-height: 4.65rem;
	}
	p.ylc_point span {
		font-size: 1.295em !important
	}
}

/* 테블릿 */
@media screen and (max-width:1024px) {
	h3 {
		color: #0F0E3C
	}
	.container {
		max-width: 1024px
	}
	.video-container {
		min-height: 320px;
	}
	div.visual_txt {
		margin-left: -350px;
		margin-top: -40px;
	}
	div.visual_txt p {
		font-size: 1.6rem;
	}
	div.visual_txt p span {
		font-size: 2.8rem;
	}
	div.visual_txt_ylc {
		margin-left: -329px;
		margin-top: -71px;
	}
	div.visual_txt_ylc p {
		font-size: 2.8rem;
	}
	div.visual_txt_ylc p span {
		font-size: 3.1rem;
	}
	.info_bar ul {
		padding: 40px 0;
	}
	.info_bar ul li>div {
		width: calc(100% - 40px);
		padding: 0 0 0 40px;
	}
	.info_bar ul li>div p {
		font-size: 1rem;
	}
	.info_bar ul li div .info_cell_number {
		font-size: 2.5rem;
		font-weight: bold;
		padding: 10px 20px 15px 0;
	}
	.info_bar ul li div .info_cell_number small {
		font-size: .8rem;
		bottom: -12px;
	}
	.info_bar ul li div .info_cell_short {
		position: relative;
	}
	.info_bar ul li div .info_cell_short p {
		padding-top: 12px;
	}
	p.ylc_point {
		font-size: 2.65rem !important;
		line-height: 4.5rem;
	}
	p.ylc_point span {
		font-size: 1.295em !important
	}
}

/* 소형 테블릿 */
@media screen and (max-width:768px) {
	.container {
		max-width: 768px
	}
	div.visual_txt {
		margin-left: -250px;
		margin-top: -30px;
	}
	div.visual_txt p {
		font-size: 1.2rem;
	}
	div.visual_txt p span {
		font-size: 2rem;
	}
	div.visual_txt_ylc p span {
		font-size: 2rem;
	}
	div.visual_txt_ylc {
		margin-left: -168px;
		margin-top: -46px;
	}
	div.visual_txt_ylc p {
		font-size: 1.8rem;
	}

	/* 20201109_LIONS LIVE2020 X SEOUL video */
	.video_wrap {
		overflow: hidden;
		padding: 0 0 20px 0;
	}
	.video_wrap .video_box {
		float: none;
		width: 100%;
		min-height: 300px;
		/* 20210215 영상삭제요청 */
		display: none;
	}
	.video_wrap .video_text {
		float: none;
		width: 100%;
	}
	.video_wrap .video_text>div {
		width: calc(100% - 40px);
		padding: 40px 20px;
	}
	.video_wrap .video_text h3 {
		padding: 0 0 20px 0 !important;
		text-align: left;
		font-weight: bolder;
	}
	.video_wrap .video_text h3 span {
		font-weight: lighter;
		font-size: .925rem;
		position: relative;
		color: #009FDB;
	}
	.video_wrap .video_text p {
		width: calc(100% -60px);
		line-height: 1.85rem;
	}
	.info_bar ul {
		padding: 50px 0;
	}
	.info_bar ul li>div {
		width: calc(100% - 25px);
		padding: 0 0 0 25px;
	}
	.info_bar ul li>div p {
		font-size: .95rem;
	}
	* / p.ylc_point {
		font-size: 1.38rem !important;
		line-height: 2.75rem;
	}
	p.ylc_point span {
		font-size: 1.25em !important
	}
}

/* 모바일 */
@media screen and (max-width:640px) {
	.container {
		max-width: 640px
	}
	.video-container {
		min-height: 272px;
	}
	.tie {
		font-size: .8rem;
	}
	div.visual a.home {
		display: none;
	}
	div.visual_txt_ylc p {
		font-size: 1.6rem;
	}
	div.visual_txt_ylc {
		margin-left: -146px;
		margin-top: -42px;
	}
	div.visual_txt_ylc p>span {
		font-size: 1.8rem;
	}
	div.visual_txt {
		margin-left: -187px;
		margin-top: -25px;
	}
	div.visual_txt p {
		font-size: 1rem;
	}
	div.visual_txt p span {
		font-size: 1.5rem;
	}
	.info_bar {
		display: none;
	}
	p.ylc_point {
		font-size: 1.225rem !important;
		line-height: 2.65rem;
	}

	/*
            .m_hidden{
                display:none;
            }
            */
}

/* 최소 사이즈 처리 */
@media screen and (max-width:480px) {
	div.visual_txt {
		margin-left: -135px;
		margin-top: -24px;
	}
	div.visual_txt p {
		font-size: .9125rem;
	}
	div.visual_txt p span {
		font-size: 1.085rem;
	}
	div.visual_txt_ylc p {
		font-size: 1.4rem;
	}
	div.visual_txt_ylc {
		margin-left: -134px;
		margin-top: -35px;
	}
	div.visual_txt_ylc p>span {
		font-size: 1.6rem;
	}
	p.ylc_point {
		font-size: 1.125rem !important;
		line-height: 2.248rem;
	}
	p.ylc_point span {
		font-size: 1.25em !important
	}
}

.slider:empty {
    display: none;
}
</style>



<!-- <script> // 아래 날짜 설정 스크립트에 포함시킴
        $(document).ready(function() {
            $('.slider').slick({
                dots: true,
                infinite: true,
                speed: 2000,
                centerMode: true,
                autoplay: true,
                autoplaySpeed: 2000,
            });
        });

    </script>-->
<script>
        // <![CDATA[
        try {
            window.addEventListener('load', function() {
                setTimeout(scrollTo, 0, 0, 1);
            }, false);
        } catch (e) {}
        // ]]>

    </script>
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<script>
	$(document).ready(function(){
		$('.btn_regist').colorbox({
			iframe:true,
			width:"95%",
			height:"90%",
			maxWidth:"500px"
		});
	});
</script>
<style>
.schedule-2021 {
	display: block;
	/* Remove bullet points; allow greater control of positioning */
	padding: 0; /* Override defaults for lists */
	margin: 0; /* Override defaults for lists */
	width: 100%; /* Get the row full width */
}

.schedule-2021 li {
	display: inline-block; /* Get all images to show in a row */
	width: 30%; /* Show 4 logos per row */
	text-align: center; /* Centre align the images */
	padding-top: 25px;
	padding-bottom: 15px;
	font-size: 15px;
}

.schedule-2021 .s2021-title {
	font-weight: bold;
	color: #0092ef;
	font-size: 17px;
}

@media ( max-width : 960px) and (min-width: 640px) {
	.schedule-2021 li {
		width: 50%;
	}
	/* Show 2 logos per row on medium devices (tablets, phones in landscape) */
}

@media ( max-width : 640px) {
	.schedule-2021 li {
		width: 100%;
	} /* On small screens, show one logo per row */
	.quick {
		padding-bottom: 0px !important;
	}
	.intro div span {
		padding-top: 0px !important;
	}
}

.schedule-2021 .highlight:after {
	width: 100%;
}

.highlight {
	display: inline-block;
	position: relative;
}

.highlight:after {
	content: "";
	width: 0;
	height: 5px;
	display: inline-block;
	background: #D9FCDB;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -10;
	transition: 0.2s all;
}

body {
	overflow-x: hidden;
}



</style>

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-87Z39D8ESL"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-87Z39D8ESL');
</script>

</head>

<body>
	<div class="container_fluid">
		<!-- header:s -->
<!-- 헤더부분 -->
<div class="gnb_boxing"></div>
<header class="container" id="wrap">
  <div id="gnb">
    <h1 class="logo">
      <a href="/">칸 라이언즈 로고</a>
    </h1>
    <a href="#" class="open"><i class="fa fa-bars" aria-hidden="true"></i></a>
    <!--h2 class="hidden">글로벌네비게이션영역</h2-->
    <nav id="nav">
           <!--  <div class="sns_wrap">
                <p><span>CANNES LIONS</span>KOREA</p>
                <ul>
                    <li><a href="https://www.instagram.com/canneslions_korea/"><span><i class="fab fa-instagram"></i></span></a></li>
                    <li><a href="https://www.facebook.com/cannes.korea"><span><i class="fab fa-facebook-square"></i></span></a></li>
                    <li><a href="https://www.youtube.com/user/canneslionskorea"><span><i class="fab fa-youtube-square"></i></span></a></li>
                </ul>
            </div> -->
      <ul>
<!--       <li><a href="" class="lm">칸라서 30<span class="plus"><i class="fas fa-chevron-down"></i></span></a> -->
<!--           <ul> -->
<!--             <li><a href="/cls30th/">칸라서 30</a></li> -->
<!--             </ul> -->
<!--       </li> -->

        <li><a href="/canneslions/summary" class="lm">칸라이언즈<span class="plus"><i class="fas fa-chevron-down"></i></span></a>
          <ul>
            <li><a href="/canneslions/summary">개요</a></li>
            <li><a href="/canneslions/program">프로그램</a></li>
            <li><a href="/canneslions/enter">출품</a></li>
            <li><a href="/canneslions/attend">참관</a></li>
          </ul></li>
        <li><a href="/xseoul/canxseoul/2025" class="lm">칸라이언즈서울<span class="plus"><i class="fas fa-chevron-down"></i></span></a>
          <ul>
            <li><a href="/xseoul/canxseoul/2025">개요<span class="plus"><i class="fas fa-chevron-down"></i></span></a></li>
            <li><a href="/xseoul/program/2025">프로그램</a></li>
            <li><a href="/xseoul/speaker/2025">연사</a></li>
            <li><a href="/xseoul/registration/2025">참가등록</a></li>
             <li><a href="/cls30th/">칸라서 30</a></li>
            <!--<li><a href="/xseoul/filmsawards">수상작</a></li>-->
            <!--<li><a href="/xseoul/articles">행사 관련 보도</a></li>-->
          </ul></li>
        <li><a href="/younglions/ylcwinner" class="lm">영라이언즈 컴피티션<span class="plus"><i class="fas fa-chevron-down"></i></span></a>
          <ul>
            <li><a href="/younglions/about/2026">개요</a></li>
            <li><a href="/younglions/competition/2026">한국대표 선발대회</a></li>
            <li><a href="/younglions/student/2026">대학생 공모전</a></li>
          </ul></li>
        <li><a href="/spikesasia/summary" class="lm">스파이크스 아시아<span class="plus"><i class="fas fa-chevron-down"></i></span></a>
          <ul>
            <li><a href="/spikesasia/summary">개요</a></li>
           <!--  <li><a href="/spikesasia/program">프로그램</a></li> -->
            <li><a href="/spikesasia/enter">출품</a></li>
            <!-- <li><a href="/spikesasia/attend">참관</a></li> -->
          </ul></li>
        <li><a href="/korea/office" class="lm">한국 사무국<span class="plus"><i class="fas fa-chevron-down"></i></span></a>
          <ul>
            <li><a href="/korea/office">소개</a></li>
            <li><a href="/korea/awords">역대 한국 수상작</a></li>
            <li><a href="/korea/juryhistory">역대 한국 심사위원</a></li>
          </ul></li>
        <li><a href="/news/list" class="lm">뉴스<span class="plus"><i class="fas fa-chevron-down"></i></span></a>
          <ul>
            <li><a href="/news/list">뉴스</a></li>
            <li><a href="/notice/list">공지사항</a></li>
            <li><a href="/qa/list">궁금해요?</a></li>
          </ul></li>
          <div class="bb_site">
            <ul>
             <a href="https://www.brandbrief.co.kr/" target="_blank"><li>Brand Brief<span class="plus"></li></a>
            </ul>
          </div>



         <div class="sns_wrap">
                <ul>

                    <li><a href="https://www.instagram.com/canneslions_korea/"><span><i class="fab fa-instagram"></i></span></a></li>
                    <li><a href="https://www.facebook.com/cannes.korea"><span><i class="fab fa-facebook-square"></i></span></a></li>
                    <li><a href="https://www.youtube.com/user/canneslionskorea"><span><i class="fab fa-youtube-square"></i></span></a></li>
                </ul>
            </div>
                  <!-- S-OIL 광고 -->
                  <!--<div class="commercial" style="position: absolute; top: 52px; right: -199px;">
                      <a href="https://story.s-oil.com/" target="_blank" alt="s-oil 광고">
                       <img src="/images/2022/s-oil_200X80.jpg"></a></div>-->
      </ul>
    </nav>
  </div>

  <script src='/assets/js/jquery.modal.min.js'></script>
  <link rel="stylesheet" href="/assets/css/jquery.modal.min.css?1" />
  <!-- <div  class="top">
      <a href="#newsletterFrm" rel="modal:open"><span><i class="far fa-envelope"></i></span>뉴스레터 구독</a>
        <div class="link_lions"><a href="https://www.lionscreativity.com/"></a></div>
            <// ?php if($is_login ) :?>
              <div class="nix-login-name" id="btn_user"><span style="color: pupple;">*</span> <span class="dropdown" style="cursor: pointer;">님</span></div>
            <// ?php endif; ?>
        <div class="sns_wrap_wide">

            <ul>
                <li><a href="https://www.instagram.com/canneslions_korea/"><span><i class="fab fa-instagram"></i></span></a></li>
                <li><a href="https://www.facebook.com/cannes.korea"><span><i class="fab fa-facebook-square"></i></span></a></li>
                <li><a href="https://www.youtube.com/user/canneslionskorea"><span><i class="fab fa-youtube-square"></i></span></a></li>
            </ul>
        </div>
  </div>-->
  <div class="top-site">
       <div class="sns_wrap_wide">
            <ul>
                <li><a href="https://www.instagram.com/canneslions_korea/"><span><i class="fab fa-instagram"></i></span></a></li>
                <li><a href="https://www.facebook.com/cannes.korea"><span><i class="fab fa-facebook-square"></i></span></a></li>
                <li><a href="https://www.youtube.com/user/canneslionskorea"><span><i class="fab fa-youtube-square"></i></span></a></li>
            </ul>
        </div>
        <div class="link_lions"><a href="https://www.lionscreativity.com/"></a></div>
                     <!-- <div  class="top"><a href="#newsletterFrm" rel="modal:open"><span><i class="far fa-envelope"></i></span>뉴스레터 구독</a></div> -->
         <div  class="top"><a href="https://canneslions.stibee.com/subscribe/"><span><i class="far fa-envelope"></i></span>뉴스레터 구독</a></div>
        <div class="brand-brief"><a href="https://www.brandbrief.co.kr/"></a></div>
  </div>

    <form class="modal" id="newsletterFrm" method="post" >
      <div class="newsletter_tit"><p>뉴스레터 신청양식</p></div>
        <table>
            <caption>뉴스레터 구독</caption>
            <tr>
                <th scope="row">
                   <label for="name">성함</label></th>
                <td>
                   <input type="text" id="emailName" name="emailName" maxlength="15" class="type_02"/>
                </td>
            </tr>
            <tr>
                <th scope="row">
                    <label for="email">E-mail</label></th>
                <td>
                    <input type="text" id="emailId" name="emailId" size="15" title="이메일 아이디" maxlength="20" tabindex="1" class="type_02" /> @
                    <input type="text" id="emailAccount" name="emailAccount" size="15" maxlength="20" title="이메일 계정" tabindex="1" class="type_02" />
                    <input type="hidden" id="letteremail" name="letteremail">
                </td>
            </tr>
            <tr>
                <td colspan="2" class="btnBox">
                    <a class="newsletter_b" style="cursor:pointer" id="btn_newsletter"> 등록 </a>
                    <a class="newsletter_b" href="#newsletterFrm" style="cursor:pointer" id="btn_newsletter_close" rel="modal:close"> 닫기 </a>
                </td>
            </tr>
        </table>
      </form>
    </header>
    <script>
    $(document).ready(function() {
      //$('#emailName').focus();
      $('#btn_newsletter').click(function() {
        newsletter('newsletterFrm');
      });
    });
    </script>

    <a class="topMove"
      style="font-size: 2.4rem; position: fixed; bottom: 65px; right: 15px; z-index: 1; max-width: 40px; max-height: 40px; color: #009FDB; opacity: .8; text-align: center"
    ><span><i class="fas fa-chevron-circle-up"></i></span></a>
<!--/header file end -->        <!-- visual 기존 개편전 슬라이드 배너 -->
		<div class="visual">
			<div class="slider">


                  <div class="banner-1">
                    <a href="https://www.canneslions.co.kr/canneslions/attend" target="_blank" style="width: 100%;height:100%;display:block;border:1px solid #eaeaea;box-sizing:border-box;">
                        <img class="mb_wide" src="/images/2026/main/main_banner_attend.gif" alt="2026 칸라이언즈 한국참관단 모집">
                        <img class="mb_sm" src="/images/2026/main/main_banner_attend.gif" alt="2026 칸라이언즈 한국참관단 모집"></a>
                  </div>
                   <div class="banner-2">
                    <a href="https://www.canneslions.co.kr/younglions/studentwinner/2026" target="_blank" style="width: 100%;height:100%;display:block;border:1px solid #eaeaea;box-sizing:border-box;">
                        <img class="mb_wide" src="/images/2026/main/main_banner_can2026.jpg?4" alt="드림라이언즈 수상작 발표 ">
                        <img class="mb_sm" src="/images/2026/main/main_banner_can2026.jpg?4" alt="드림라이언즈 수상작 발표"></a>
                  </div>
                  <!--<div class="banner-3">
                    <a href="https://www.canneslions.co.kr/younglions/competition/2026" target="_blank" style="width: 100%;height:100%;display:block;border:1px solid #eaeaea;box-sizing:border-box;">
                        <img class="mb_wide" src="/images/2026/main/main_banner_ylc_cpt.png?2" alt="영라이언즈 한국대표 선발대회 접수 ">
                        <img class="mb_sm" src="/images/2026/main/main_banner_ylc_cpt.png?2" alt="영라이언즈 한국대표 선발대회 접수"></a>
                  </div>-->
                  <div class="banner-4">
                    <a href="https://www.canneslions.co.kr/younglions/studentwinner/2026" target="_blank" style="width: 100%;height:100%;display:block;border:1px solid #eaeaea;box-sizing:border-box;">
                        <img class="mb_wide" src="/images/2026/main/main_banner_student_2026.png?3" alt="2026 드림라이언즈 ">
                        <img class="mb_sm" src="/images/2026/main/main_banner_student_2026.png?3" alt="2026 드림라이언즈 "></a>
                  </div>



			</div>
		</div>
		<!--  visual 기존 개편전-->


		<article class="main2 main">

<!-- 초대권 등록 버튼 / 예매버튼  -->
     <!--<div class="container canxseoul">
                 <h3 class="news">
                          <span class="sub_t">Event</span>칸 라이언즈 서울 2025
                        </h3>
                        <div class="btn-2-seoul2023">

                                    <a href="https://www.canneslions.co.kr/xseoul/program/2025" target="_blank">
                                      <button class="btn" type="button">
                                        <div>
                                          <sapn>프로그램</sapn></div>
                                      </button>
                                    </a>
                                    <a href="https://tickets.interpark.com/goods/25012634" class="" target="_blank">
                                      <button class="btn" type="button">
                                         <div>
                                          <sapn>예매</sapn></div>
                                      </button>
                                    </a>
                                    <a href="https://www.canneslions.co.kr/notice/view?aid=3524" target="_blank">
                                      <button class="btn" type="button">
                                        <div>
                                          <sapn>마케터스 아카데미</sapn></div>
                                      </button>
                                    </a>
                                    <a href="https://www.canneslions.co.kr/notice/view?aid=3523" class="" target="_blank">
                                      <button class="btn" type="button">
                                         <div>
                                          <sapn>영 크리에이티브 아카데미</sapn></div>
                                      </button>
                                    </a>

                         </div>-->

                         <!-- 파트너사 배너 -->
                          <!--  <div class="ylc_partner partners_banner partners_bb_can">
                                <p class="pt-tit">Thank you our partners</p>
                                <img src="/images/2025/xseoul/partners.png?4" alt="partners">
                          </div>-->
                        <!-- /파트너사 배너 -->
                <!-- </div>-->

          <!-- / 초대권 등록 버튼 / 예매버튼  -->

<script>
$(document).ready(function(){
	$('.btn_regi').colorbox({
		iframe:true,
		width:"95%",
		height:"90%",
		maxWidth:"500px"
	});
});
</script>

            <div class="container">

            <!--  유튜브 영상 30주년 인터뷰 시작 -->

                             <!-- <h3 class="news">
                                    <span class="sub_t">30TH INTERVIEW</span>칸라이언즈서울 30주년 인터뷰
                             </h3>
                <div id="can-youtube-gallery-wrapper" class=" flex items-center justify-center">

                        <div class="container mx-auto bg-white rounded-xl  max-w-6xl p-2">

                            <div id="can-youtube-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8 pt-12">

                            </div>

                            <div class="flex justify-center space-x-4 pb-10">
                                <button id="load-more-btn"
                                        class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-8 rounded-full shadow-md transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
                                    더보기
                                </button>
                                <button id="collapse-btn"
                                        class="bg-gray-500 hover:bg-gray-600 text-white font-semibold py-3 px-8 rounded-full shadow-md transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 hidden">
                                    간략히 보기
                                </button>
                            </div>
                        </div>-->

                        <!-- Video Modal Overlay (모달 기능 제거로 인해 HTML에서 완전히 삭제됨) -->

          <!--  </div>-->
            <!--  /유튜브 영상 30주년 인터뷰 끝 -->

				<h3 class="news">
					<span class="sub_t">LIONS NEWS</span>칸라이언즈 소식
				</h3>
				<div id="mainnews"></div>
                <a href="/news/list" class="more more2">더보기 +<span></span></a>

				<script src="/assets/js/mainNews.js"></script>
			</div>
		</article>
		<article class="main3 main">
			<h3 class="hidden">YOUNG LIONS COMPETITION</h3>

<!--
              <div class="container ylc_wrap">
                <div class="i_box">
                  <img src="/images/2023/student_banner_400.jpg" alt="대학생공모전">
                </div>
                <div class="m3_txt">
                  <p>
                    <span class="point_txt">만 29세 이하 대학생 누구나</span>대학생 공모전
                  </p>
                  <p>
                    그랑프리 수상팀은 2023년 칸 라이언즈 페스티벌 Complete Student Pass 2매와 숙박권, 2023년 상반기 인턴십 기회를 제공합니다.
                  </p>
                  <p>
                    <a href="https://www.canneslions.co.kr/younglions/student/2023" class="more_yc">공모과제 보기</a>
                  </p>
                </div>
              </div>
 -->

			<div class="container ylc_wrap">
				<div class="i_box">
					<img src="/images/2026/main/ylc_2026.png" alt="영라이언즈컴피티션사진">
				</div>
				<div class="m3_txt">
					<p>
						<span class="point_txt">국가대표 크리에이티브 선발!</span>2026년 YLC 한국대표 선발대회
					</p>
                  <p>
						GOLD 수상팀은 대한민국을 대표해 2026년 칸라이언즈가 주관하는<br> 영라이언즈 컴피티션(Young Lions Competitions)에 출전합니다.
					</p>
                    <!-- <p>
                                      브리프공개 : 2025. 1. 16
                    </p>
                    <p>
                                      과제 제출 : 2025. 1. 20(16:00 KST)
                    </p> -->
					<p>
						<a href="https://www.canneslions.co.kr/younglions/ylcwinner/2026" class="more_yc">수상작 & 심사평 보기</a>
					</p>
				</div>
			</div>


			<div class="container ylc_wrap">
				<div class="i_box">
					<img src="/images/2026/main/dream_2026.png" alt="2024 드림 라이언즈">
				</div>
				<div class="m3_txt">
					<p>
						<span class="point_txt">크리에이티브 꿈나무!</span>2026 드림라이언즈
					</p>
					<!-- <p>- 1차 심사결과 공개 : 3월 25일(수)</p>-->
					<p>칸라이언즈 티켓의 주인공 공개!<br>
					 심사위원단의 총평도 확인하세요</p>
					<p>
						<a href="https://www.canneslions.co.kr/younglions/studentwinner/2026 " class="more_yc">수상작 & 심사평 보기</a>
					</p>
				</div>
			</div>


		</article>
		<article class="main4 main">
			<h3>
				<span class="sub_t">THE WORK &amp; WARC</span>수상작 &amp; 트렌드
			</h3>
			<div class="work">
				<a href="https://www.lovethework.com/"> <img src="/images/2020/img/thework.png" alt="thework로고"> <span>칸 라이언즈 세미나 & 수상작 아카이브</span>
				</a>
			</div>
			<div class="warc">
				<a href="https://www.warc.com/Welcome"> <img src="/images/2020/img/warc.png" alt="warc로고"> <span>글로벌 마케팅 정보 플랫폼</span>
				</a>
			</div>
		</article>

	</div>
	<!-- footer:s -->
        <div class="footer">
	<div class="footer_top">
		<div class="link_wrap">
			<div class="site_link">
				<p>
					같이 즐겨요!<span>페스티벌</span>
				</p>
				<ul>
					<li><a href="https://www.canneslions.com/festival" target="_blank">Cannes Lions</a></li>
					<!-- <li><a href="https://lionslive.canneslions.com/" target="_blank">LIONS Live</a></li> -->
					<li><a href="https://www.canneslions.com/awards" target="_blank">Cannes Lions Awards</a></li>
				</ul>
			</div>
			<div class="newsletter_link">
				<p>
					<span>칸라이언즈 소식</span>쉽고 빠르게
				</p>
				<div>
					<!-- <a href="#newsletterFrm" rel="modal:open">뉴스레터 구독</a> -->
                    <a href="https://canneslions.stibee.com/subscribe/">뉴스레터 구독</a>
				</div>
			</div>
            <div class="newsletter_link bb-logo">
                <p></p>
                <div>
                  <a href="https://www.brandbrief.co.kr/" target="_blank"><img src="https://www.canneslions.co.kr/images/logo-bb.png"></a>
                </div>
            </div>
		</div>
	</div>
	<div class="footer_inner">
		<div class="sitemap">
			<dl>
				<dt>
					<a href="/canneslions/summary">칸라이언즈</a>
				</dt>
				<dd>
					<a href="/canneslions/summary">칸라이언즈란?</a>
				</dd>
				<dd>
					<a href="/canneslions/program">프로그램</a>
				</dd>
				<dd>
					<a href="/canneslions/enter">출품</a>
				</dd>
				<dd>
					<a href="/canneslions/attend">참관</a>
				</dd>
			</dl>
			<dl>
				<dt>
					<a href="/xseoul/canxseoul/2025">칸라이언즈서울</a>
				</dt>
				<dd>
					<a href="/xseoul/program/2025">2025 칸라이언즈서울</a>
				</dd>
				<dd>
					<a href="/xseoul/program/2025">프로그램</a>
				</dd>
				<dd>
					<a href="/xseoul/speaker/2025">연사</a>
				</dd>
				<!-- 20200825 숨김
				<dd><a href="/xseoul/lionsseoul">LIONS SEOUL<sup>+</sup></a></dd>
				<dd><a href="/xseoul/filmsawards">수상작</a></dd>
				<dd><a href="/xseoul/articles">행사 관련 보도</a></dd>-->
			</dl>
			<dl>
				<dt>
					<a href="/younglions/competition">영라이언즈 컴피티션</a>
				</dt>
				<dd>
					<a href="/renew2020/younglions/ylc_about.php">개요</a>
				</dd>
				<dd>
					<a href="/younglions/competition">한국대표 선발대회</a>
				</dd>
			</dl>
			<dl>
				<dt>
					<a href="/spikesasia/summary">스파이크스 아시아</a>
				</dt>
				<dd>
					<a href="/spikesasia/summary">스파이크스 아시아란?</a>
				</dd>
				<dd>
					<a href="/spikesasia/program">프로그램</a>
				</dd>
				<dd>
					<a href="/spikesasia/enter">출품</a>
				</dd>
				<dd>
					<a href="/spikesasia/attend">참관</a>
				</dd>
			</dl>
			<dl>
				<dt>
					<a href="/korea/office">한국 사무국</a>
				</dt>
				<dd>
					<a href="/korea/office">소개</a>
				</dd>
				<dd>
					<a href="/korea/awords">역대 한국 수상작</a>
				</dd>
				<dd>
					<a href="/korea/juryhistory">역대 한국 심사위원</a>
				</dd>
			</dl>
			<dl>
				<dt>
					<a href="/news/list">뉴스</a>
				</dt>
				<dd>
					<a href="/news/list">뉴스</a>
				</dd>
				<dd>
					<a href="/notice/list">공지사항</a>
				</dd>
				<dd>
					<a href="/qa/list">궁금해요?</a>
				</dd>
			</dl>
		</div>
	</div>
	<div class="footer_middle">
<!-- 		<div> -->
<!-- 			<a href="#" class="f_logo">A&amp;F korea 로고</a> -->
<!-- 			<address> -->
<!-- 			칸 라이언즈 코리아<br> 서울시 중구 소월로 10, 3층<br> +82 2 757 1830 ｜ <a href="/policy/privacy" style="font-weight: bold; color: #666;">개인정보처리방침</a><br>
<!-- 				webmaster@canneslions.co.kr<br> <span class="copyright">Copyright© Cannes Lions Korea All Rights Reserved.</span> -->
<!-- 			</address> -->
<!-- 		</div> -->
            <div>
                <div class="a_f_address">
                  <a href="#" class="f_logo">A&amp;F korea 로고</a>
                  <address>
                                칸라이언즈서울<br> 서울시 중구 소월로 10, 3층<br> +82 2 757 1830 ｜ <a href="/policy/privacy" style="font-weight: bold; color: #666;">개인정보처리방침</a><br>
                    webmaster@canneslions.co.kr<br> <span class="copyright">Copyright© Cannes Lions Korea All Rights Reserved.</span>
                  </address>
                </div>

                <div class="partner-bb">
                    <p>Media Partner</p><a href="https://www.brandbrief.co.kr/"><img src="https://www.canneslions.co.kr/images/logo_bb_lg.png"></a>
                </div>
                <div class="partner-bb">
                    <p>PR Partner</p><a href="https://brandvibe.co.kr/"><img src="https://www.canneslions.co.kr/images/brandvibe-logo.png"></a>
                </div>
            </div>
	</div>
	<div class="footer_bottom">
		<div>
			<dl class="festivals">
				<dt class="hidden">LIONS FESTIVALS</dt>
				<dd>
					<span>LIONS FESTIVALS</span><a href="https://www.eurobest.com/home/" title="eurobest" target="_blank"><img
						src="/images/2020/img/copy_euro.gif" alt="eurobest"
					></a> <a href="https://www.dubailynx.com/home/" title="dubailynx" target="_blank"><img src="/images/2020/img/copy_dubai.gif"
						alt="dubailynx"
					></a> <a href="https://www.spikes.asia/home/" title="spikes asia" target="_blank"><img src="/images/2020/img/copy_spikes.gif"
						alt="spikes asia"
					></a>
				</dd>
			</dl>
			<div class="inseoulftv_box" style="cursor: pointer;">
				<a> &nbsp; X 서울</a>
				<div class="inseoulftv_year clns_scroll" style="display: none;">
					<ul>
                        <li><a href="https://www.canneslions.co.kr/xseoul/canxseoul/2024">칸X서울 2024</a></li>
                        <li><a href="https://www.canneslions.co.kr/xseoul/canxseoul/2023">칸X서울 2023</a></li>
						<li><a href="https://www.canneslions.co.kr/xseoul/canxseoul/2022">칸X서울 2022</a></li>
						<li><a href="https://www.canneslions.co.kr/xseoul/canxseoul/2021">칸X서울 2021</a></li>
						<li><a href="https://www.canneslions.co.kr/xseoul/canxseoul/2020">칸X서울 2020</a></li>
						<li><a href="https://www.canneslions.co.kr/inseoul/2019/main">칸X서울 2019</a></li>
						<li><a href="https://www.canneslions.co.kr/inseoul/2018/main">칸X서울 2018</a></li>
						<li><a href="https://www.canneslions.co.kr/inseoul/2017/main">칸X서울 2017</a></li>
						<li><a href="https://www.canneslions.co.kr/inseoul/2016/main">칸X서울 2016</a></li>
						<li><a href="https://www.canneslions.co.kr/inseoul/2015/main">칸X서울 2015</a></li>
						<li><a href="https://www.canneslions.co.kr/inseoul/2014/main">칸X서울 2014</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-62875654-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-62875654-1');


$(document).ready(function() {
   function logout() {
	   console.log("logout??");

	   $.get('/registration/2021/logout.php', function(data) {
		   console.log(data);
		   location.reload();

	   });
   }
    $(".dropdown").dropdown({

		   template : function(r){ return "<li><a>"+r.text+"</a></li>"; },
		   buttons:[
		       //Button 1
			   {
				   text: '로그아웃', //Inner HTML
				   href: '', //<a> href
				   addClass: 'custom-button', //<li> Class
				   onClick: function(p,e){
					   logout();

					   return true; //Return true - will close dropdown, false - will keep dropwdown
				   }
			   },

			   // Separator
			   {},

			   //Button 2

			   {
	                text: 'On-Demand 2022',
	                href: '/xseoul/ondemand/2022',
	                addClass: ''
		       },

			   {
                text: '2022 프로그램 목록',
                href: '/xseoul/program/2022',
                addClass: ''
	            },

			   //Button 3
			   {
                text: '2022 연사소개',
                href: '/xseoul/speaker/2022',
                addClass: ''
            }
		   ]
	   });
});
</script>

        <!-- footer:e -->
	</div>


<!--<script>
   $(function () {

        // 날짜설정시 주의점 (month : 0 ~ 11)

        /** **/
        var curDate = new Date();
        var startDate = new Date(2025, 0, 29, 0, 0, 0);
        // 년, 월 (month : 0-11), 일(1-31), 시, 분, 초(0-59), 밀리초

        if (curDate.getTime() >= startDate.getTime() ) {
        	$(".slider-2 .mb_wide").attr("src", "/images/main_banner_enter_2025.png");
        	$(".slider-2 .mb_sm").attr("src", "/images/main_banner_enter_2025.png");
        }
    });
</script>  -->


<!-- 날짜 설정 종료시 슬라이드까지 숨김 -->
<script> 
    $(document).ready(function () {
        
        // 날짜 설정시 주의점 (month : 0 ~ 11)
        var curDate = new Date();
        var startDate = new Date(2025, 8, 26, 7, 0, 0);
        var endDate = new Date(2026, 3, 9, 23, 59, 59);
    
        // slick 초기화 전에 배너 제거
        if (!(curDate >= startDate && curDate <= endDate)) {
            $(".banner-2").remove();
        }
    
        // slick 초기화
        $('.slider').slick({
            dots: true,
            infinite: true,
            speed: 2000,
            centerMode: true,
            autoplay: true,
            autoplaySpeed: 2000,
        });
	});
</script>


<!-- 유튜브영상 30주년 인터뷰 -->
<script>

        const videosPerLoad = 6; // 한 번에 로드할 비디오 수 (3개씩 2줄)
        let currentDisplayedVideos = 0; // 현재 표시된 비디오 수

        // Get jQuery elements
        const $videoGrid = $('#can-youtube-grid');
        const $loadMoreBtn = $('#load-more-btn');
        const $collapseBtn = $('#collapse-btn'); // Get collapse button element

        // Removed modal-related jQuery elements as they are no longer needed
        // const $videoModalOverlay = $('#youtube-modal-overlay');
        // const $closeModalBtn = $('#close-modal-btn');
        // const $modalVideoPlayer = $('#can-youtube-player');

        /**
         * Creates a video thumbnail card.
         * @param {object} videoData - Object containing video ID and title ({ id: string, title: string })
         * @returns {jQuery} - The created video card jQuery element (now an <a> tag).
         */
        function createVideoCard(videoData) {
            // Create an <a> tag that acts as the entire clickable card
            const $card = $('<a></a>')
                .attr('href', `https://www.youtube.com/watch?v=${videoData.id}`)
                .attr('target', '_blank')
                .attr('rel', 'noopener noreferrer') // Security best practice for target="_blank"
                .addClass('group bg-gray-50 rounded-xl overflow-hidden ' +
                          'shadow-md hover:shadow-xl ' + // Shadow hover
                          'transform hover:scale-105 ' + // Scale hover
                          'transition duration-300 ease-in-out'); // Single transition for all relevant properties

            $card.html(`
                <div class="can-youtube-thumbnail-wrapper relative w-full pt-[56.25%] bg-gray-200 rounded-t-xl overflow-hidden">
                    <img src="https://img.youtube.com/vi/${videoData.id}/hqdefault.jpg"
                         alt="YouTube Video Thumbnail"
                         class="absolute top-0 left-0 w-full h-full object-cover"
                         onerror="this.onerror=null;this.src='https://placehold.co/480x270/cccccc/333333?text=Video+Thumbnail+Error';">
                    <!-- Play button overlay, visible on group hover -->
                    <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-30 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                        <svg class="w-16 h-16 text-white" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M8 5v14l11-7z"/>
                        </svg>
                    </div>
                    <!-- Display video title in the top-left of the thumbnail -->
                    <h4 class="absolute top-2 left-2 text-sm text-white bg-black bg-opacity-70 px-2 py-1 rounded-md max-w-[calc(100%-1rem)] truncate">${videoData.title}</h4>
                </div>
            `);
            // Removed: $card.on('click', () => openVideoModal(videoData.id, videoData.title));
            return $card;
        }

        /**
         * Renders the video gallery.
         * @param {boolean} append - Whether to append to existing videos or replace
         */
        function renderVideos(append = false) {
            if (!append) {
                $videoGrid.empty(); // Clear existing content
            }

            const startIndex = append ? currentDisplayedVideos : 0;
            const endIndex = Math.min(startIndex + videosPerLoad, videos.length);

            for (let i = startIndex; i < endIndex; i++) {
                const videoData = videos[i];
                const $videoCard = createVideoCard(videoData);
                $videoGrid.append($videoCard);
            }
            currentDisplayedVideos = endIndex;

            // Button visibility logic
            if (currentDisplayedVideos >= videos.length) {
                // All videos loaded
                $loadMoreBtn.addClass('hidden');
                if (videos.length > videosPerLoad) { // Only show collapse if there were more than initial videos
                    $collapseBtn.removeClass('hidden');
                }
            } else if (currentDisplayedVideos > videosPerLoad) {
                // More than initial videos loaded, but not all
                $loadMoreBtn.removeClass('hidden');
                $collapseBtn.removeClass('hidden');
            } else {
                // Initial videos loaded (or less)
                $loadMoreBtn.removeClass('hidden');
                $collapseBtn.addClass('hidden');
            }
        }

        /**
         * Loads more videos when the "Load More" button is clicked.
         */
        function loadMoreVideos() {
            renderVideos(true); // Append to existing videos
        }

        /**
         * Resets the video gallery to its initial state (first 6 videos).
         */
        function collapseVideos() {
            currentDisplayedVideos = videosPerLoad; // Reset to initial load count
            renderVideos(false); // Re-render from scratch
        }

        // Removed openVideoModal and closeVideoModal functions
        let videos = [];
        // Set up event listeners using jQuery
        $(document).ready(function() {
            $loadMoreBtn.on('click', loadMoreVideos);
            $collapseBtn.on('click', collapseVideos); // Event listener for collapse button
            // Removed modal-related event listeners
            // $closeModalBtn.on('click', closeVideoModal);
            // $videoModalOverlay.on('click', (e) => {
            //     if ($(e.target).is($videoModalOverlay)) {
            //         closeVideoModal();
            //     }
            // });

            // Initial video rendering on page load
            currentDisplayedVideos = 0; // Reset for initial load

                    // API에서 비디오 데이터 가져오기
            $.ajax({
                url: '/nixwork/30th/xhr.php',
                type: 'POST',
                data: {
                    action: 'videos'
                },
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        videos = response.data;
                       // console.log(videos);

                        renderVideos();
                    } else {
                        console.error('비디오 데이터를 가져오는데 실패했습니다:', response.message);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('AJAX 오류:', {
                        status: xhr.status,
                        statusText: xhr.statusText,
                        responseText: xhr.responseText,
                        error: error
                    });
                }
            });
        });
    </script>
</body>


</html>