@charset "utf-8";
 
/* ------------------------------------------------------- MAIN CONTENTS ------------------------------------------------------- */

/* 2025 공통 스타일 */

/* 공통 타이틀 디자인 */
.tittle-area { display:flex; justify-content:space-between; align-items: center; margin-bottom:4em; font-size:10px }
.tittle-area .tit { font-size:4em; font-weight:600; line-height:100%; letter-spacing:-1px; color:#ccc; }
.tittle-area .tit a {  font-weight:600;  color:#ccc; transition:all 0.5s;}
.tittle-area .tit a:hover {color:#fafafa; text-decoration:underline;  transition:all 0.5s;}
.tittle-area .tit small {color:var(--biff-red); font-size:0.7em; margin-left:1ex; vertical-align:text-bottom;}
.tittle-area .tit span {display:inline-block; width:0.1em; aspect-ratio:1 / 1; margin:0 .25ex; vertical-align: middle; border-radius:50em; background-color:#D9D9D9; }
.tittle-area svg { color:#fafafa; stroke-width: 2; width:2.8em; height:2.8em;}
/* Swiper 메인 슬라이드 관련 스타일*/
.swiper-pagination { position: relative; display: none; gap:1rem; justify-content: space-between; align-items: center; width: 100%; padding-top: 2rem;  box-sizing: border-box; bottom:unset; }
.swiper-pagination .swiper-pagination-bullet { flex: 1; height: 2px;  background: #fafafa; opacity: 0.1; border-radius: 2px; transition: background 0.3s ease, opacity 0.3s ease; margin:0; }
.swiper-pagination .swiper-pagination-bullet-active { background: #fafafa !important; opacity: 1; }

/* Slick 슬라이드 옵션 관련 css  */
/* 이전 슬라이드 버튼 숨기기 */
.slick-prev { display: none !important; }
/* 다음 슬라이드 버튼 숨기기 */
.slick-next { display: none !important; }
/* 기본 도트 스타일 */
.slick-dotted .slick-dots { position: absolute; bottom: 7.2rem; /* 하단에서의 위치 조정 */ width: 100%; display: flex; justify-content: center; padding: 0; margin: 0; list-style: none; }
/* 각 도트의 스타일 */
 .slick-dotted .slick-dots li { position: relative; display: inline-block; margin: 0 7.5px; /* 도트 간의 간격 */ padding: 0; cursor: pointer;}
/* 도트의 기본 상태 */
.slick-dotted .slick-dots li button { font-size: 0; line-height: 0; display: block; padding: 3px; cursor: pointer; color: transparent; border: 0; outline: none; background: #575757; border-radius: 50%; }
/* 활성화된 도트의 스타일 */
.slick-dotted .slick-dots li.slick-active button { background: var(--biff-red); /* 활성화된 도트의 색상 */ }


/* 메인 비주얼 스타일 */
#visual {width: 100%; /* height:100vh; height: calc(var(--vh, 1vh) * 100);  */flex-shrink: 0; position:relative; font-size:10px; background-color: #000;  background-image: url('/kor/img/main/30th_symbol_w.svg');  background-repeat: no-repeat;  background-position: right 7em top -15.9em; background-size:118.7em;}
#visual .banner-logo { padding:12em 0; }
#visual .banner-logo img { height:15em; max-width:80%;}

#visual .banner-wrap {position:relative;padding-bottom:1px;  overflow:hidden; border-left: 1px solid rgba(255,255,255,0.2); border-right: 1px solid rgba(255,255,255,0.2);}
#visual .banner-slider {height:100%; display: flex;;}
#visual .visual-slider .slick-list {height:100%;}
#visual .visual-slider .slick-track {height:100%;}
#visual .visual-slider .slick-track .visual {height:100%;}

#visual .banner-slider .banner { position: relative;aspect-ratio:594 / 350;  background:url('/kor/img/cont/bg-info2.jpg?ver=1') no-repeat center center; background-size:cover;  }
#visual .banner-slider .banner a { display:flex; width:100%; height:100%; color:#fafafa; border:1px solid; border-right: none; padding:4em; font-size:1em; align-items: flex-end; z-index: 1; position: relative; transition: border-color 0.3s ease;  border-color: rgba(255,255,255,0.2); backdrop-filter:brightness(0.7)}
#visual .banner-slider .banner a:hover { border:1px solid var(--biff-red); }
#visual .banner-slider .banner:last-child a { border-right: 1px solid rgba(255,255,255,0.2); }
#visual .banner-slider .banner:last-child a:hover { border-right: 1px solid var(--biff-red); }
#visual .banner-slider .banner a .arr {position:absolute; top:0; right:0; width:5em; height:5em; text-align:center; align-content:center; z-index:1; background-color:var(--biff-red); opacity:0; transition:all 0.5s;}
#visual .banner-slider .banner a .arr svg {stroke-width:4px}
#visual .banner-slider .banner a:hover .arr {opacity:1;}

#visual .banner-slider .banner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(0,0,0,0%) 30%, rgba(0,0,0) 100%); pointer-events: none; /* 클릭 방지 */}



#visual .banner-slider .banner .txtbox .t_s { font-size:1.8em; line-height:1.3; letter-spacing:-0.5px; font-weight: 300; }
#visual .banner-slider .banner .txtbox .t_tit { font-size:2.4em; line-height:1.3; letter-spacing:-1px; font-weight: 600; padding-top:1ex; text-wrap: balance; word-break: keep-all;}





/* upcoming */
.event_upcoming {margin-top: 10em;  font-size:10px; background:#222; }
.event_upcoming .container-xxl {display:flex;}
.event_upcoming .tit {position:relative; display:flex; flex-direction:column; justify-content:center; flex-shrink:0;width:18em; padding-right:5em; color:#fafafa; z-index:2;}
.event_upcoming .tit:before {content:""; position:absolute; right:0; top:0; display:block; width:100vw; height:100%; background-color: var(--biff-red-v2);z-index:-1}
.event_upcoming .tit b {font-size:2.4em;}
.event_upcoming .tit a {display:flex; align-items:center; gap:1ex; color:rgba(255, 255, 255, 0.70); font-size:1.4em;}
.event_upcoming .tit a svg {width:0.6em; stroke-width:4px; } 

.event_upcoming canvas {display:none;}
.event_upcoming .upcoming { width:calc(100% - 18em); background:#000;}
.event_upcoming .coming_list {position:relative; background:#222; overflow:visible}
.event_upcoming .coming_list .swiper-slide {width:30em; border-right:1px solid #000;}
.event_upcoming .coming_list .swiper-slide > a {display: flex;flex-direction: column;justify-content: space-between;gap: 1ex;width:100%;height: 12em;padding: 1.5em 2em 1em;background-coloR:#222;color:#fafafa;border:1px solid transparent;transition:0.3s ease-in-out;}
.event_upcoming .coming_list .swiper-slide > a:hover {border-color:var(--biff-red);}
/* .event_upcoming .coming_list .swiper-slide.now-active > a {border-color:var(--biff-red);} */
.event_upcoming .coming_list .schedule {color: #fafafa;}
.event_upcoming .coming_list .schedule .date {position:absolute;top:0;right:0;display:inline-block;font-size:12px;font-weight:700;font-size: 1.3em;padding: .5ex 1em;color: #fff;background: #333;align-content: center;}
.event_upcoming .coming_list .swiper-slide > a:hover .schedule .date,
.event_upcoming .coming_list .schedule .date.today {color:#fff; background-color:var(--biff-red-v2);}
.event_upcoming .coming_list .schedule .date.today {background-color: #111;}
.event_upcoming .coming_list .schedule .time {display:block;font-size: 1.9em;font-weight:700; line-height:1.2; color:#fafafa;}
.event_upcoming .coming_list  .subject {display:inline-block;display:-webkit-box;height:100%; overflow:hidden;font-size: 1.6em;font-weight:400; color:#fafafa; word-break:keep-all;line-height: 1.4;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.event_upcoming .coming_list  small {margin-top: 1ex; font-size: 1.3em;font-weight: 300; color:#888;line-height:1;}

.event_upcoming .coming_list .now-active .date.today {background-color:var(--biff-red-v2)}
.event_upcoming .coming_list .now-active .date > span { font-weight:700; color: #fff; animation: now-effect 1s ease-in-out infinite;}
.event_upcoming .coming_list .now-active .time  { color: var(--biff-red); }

@keyframes now-effect {
  50% {
    opacity: 0;
  }
}

/* Sub Banner */
.sub_banner {display:none}

/* NOTICE & NEWS */
.community {padding:14em 0 19em; font-size:10px; background-color:#000;}

.community .boxes {display:flex;transform: translateX(4px);}
.community .box_board {display:flex;width: 80%;}
.community .box_board .box {width: 50%;}
.community .box_board .box .mo_tit {display:none;}
.community .box_board .box ul {display:flex;margin-left: -2px;}
.community .box_board .box li {width:50%;aspect-ratio: 1 / 1;margin-left: -1px; overflow:hidden;}
.community .box_board .box li:nth-child(n+3) {display:none;}
.community .box_board .box li a {position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;width:100%;height:100%;padding:4em;color: #fafafa;font-size: 1em;font-weight: 600;border: 1px solid rgb(255 255 255 / 20%); border-right: 1px solid rgb(255 255 255 / 0%);}
.community .box_board .box li a:hover {border-color:var(--biff-red) !important; background-color:#222; transition:all 0.5s;}
.community .box_board .box li .arr {position:absolute; top:0; right:0; width:5em; height:5em; text-align:center; align-content:center; z-index:1; background-color:var(--biff-red); opacity:0; transition:all 0.5s;}
.community .box_board .box li .arr svg {stroke-width:4px}
.community .box_board .box li a:hover .arr {opacity:1;}
.community .box_board .box li .cate {margin-bottom:1.4em; font-size:1.8em; color:var(--biff-red); font-weight:700; }
.community .box_board .box li .tit {margin-bottom:1.5em;font-size:2em;font-weight:700;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; /* 이 값이 2면 2줄까지 표시하고 이후 생략 */-webkit-box-orient: vertical;}
.community .box_board .box li .desc {font-size:1.6em;color:#aaa;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; /* 이 값이 2면 2줄까지 표시하고 이후 생략 */-webkit-box-orient: vertical;}
.community .box_board .box li .date {font-size:1.5em;}

.community .box.sponsor {position:relative; width: 20%;aspect-ratio: 1 / 1;margin-left: -2px;}
.community .box.sponsor .swiper-spon-gold,
.community .box.sponsor .swiper-wrapper,
.community .box.sponsor .swiper-wrapper a ,
.community .box.sponsor .swiper-slide img { width:100%; height:100%;}
.community .box.sponsor .swiper-spon-gold {border:1px solid rgb(255 255 255 / 20%);overflow:hidden;}
.community .box.sponsor .swiper-pagination{position: absolute;display: flex;right: 1em;bottom: 1em; /* 하단에서의 위치 조정 */padding-top: 0;justify-content: flex-end;width: auto;gap: 4px;}
.community .box.sponsor .swiper-pagination .swiper-pagination-bullet {flex:none;width: 6px;height: 6px;border-radius: 50em;}
.community .box.sponsor .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {background-color:var(--biff-red) !important;}

.community .box .date, .community .box .desc { font-size: 1em; color: #aaa; }



/* OFFICIAL SELECTION  */
.selections {padding:7em 0 10em; font-size:10px}
.selections .tittle-area {text-align:center; justify-content:center;}
.selections .tittle-area .tit {width:max-content; height:1.5em; padding:0 1em .25ex 1em;font-size:6em; color:#fafafa; align-content:end; background:url(/kor/img/main/selec_tit_bg.svg) no-repeat; background-position:left bottom; background-size: auto 100%;  }
.selections .selection_area {padding-bottom:2px;}
.selections .selec-swiper .swiper-wrapper {position:relative; }
.selections .selec-swiper:before,
.selections .selec-swiper:after {content:""; position:absolute; bottom:0; display:block; width:calc(((100% - 80px) / 1.6) * 0.3); height:100%;z-index:2;}
.selections .selec-swiper:before {left:0; background:linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); }
.selections .selec-swiper:after { right:0; background:linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); }
.selections .selec-swiper .swiper-slide {aspect-ratio:16 / 9; margin-right:4em; }
.selections .selec-swiper .swiper-slide a {position:relative; display:block; width:100%; height:100%; padding:6em; font-size:1em; align-content:end; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 30%, rgba(0, 0, 0, 0.90) 100%); transition:all 0.5s;}
.selections .selec-swiper .swiper-slide.swiper-slide-active a {border: 1px solid rgba(255, 255, 255, 0.20); }
.selections .selec-swiper .swiper-slide a:hover {border-color:var(--biff-red)}
.selections .selec-swiper .swiper-slide .img {position:absolute; left:0; top:0; width:100%; height:100%; z-index:-1;}
.selections .selec-swiper .swiper-slide .img img {width:100%; height:100%; object-fit:cover;}
.selections .selec-swiper .swiper-slide .arr {position:absolute; top:3rem; right:3rem; width:3em; height:3em; z-index:1; color: #fafafa; stroke-width: 1.5;transition:all 0.5s;}
.selections .selec-swiper .swiper-slide a:hover .arr {color:var(--biff-red)}
.selections .selec-swiper .swiper-slide .txt  {display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:1em; font-size:1em}
.selections .selec-swiper .swiper-slide .txt .cate {display:inline-block; padding:0.33em 0.8em; font-size:1.5em; font-weight:700; color:#fafafa; line-height:1;  background-color:var(--biff-red); }
.selections .selec-swiper .swiper-slide .txt .tit {display:flex; align-items:baseline; flex-wrap:wrap;font-size:4.8em; font-weight:700; color:#fafafa; line-height:1; gap:0.3ex;}
.selections .selec-swiper .swiper-slide .txt .tit small {display:inline-block; font-size:1ex; color:#aaa; font-weight:400; letter-spacing:-0.01em;}
.selections .selec-swiper .swiper-slide .txt .sub {font-size:1.7em; color:#aaa; font-weight:400;}




/* OFFICIAL SCREENING */ 
.screening {padding: 8em 0; font-size:10px; background-color:#222;}
.screening .container-xxl {position:relative;}							
.screening .container-xxl:not(.tittle-area):before,
.screening .container-xxl:not(.tittle-area):after { content: ""; position: absolute;bottom: 0; display: block; width: calc((100vw - 100% + 3rem) / 2); height: 100%;  z-index: 2;}				
.screening .container-xxl:not(.tittle-area):before {left: calc(0px - ((100vw - 100% + 3rem) / 2));background: linear-gradient(90deg, #222222c7 0, rgb(34 34 34 / 0) 100%);}
.screening .container-xxl:not(.tittle-area):after {right: calc(0px - ((100vw - 100% + 3rem) / 2));background: linear-gradient(270deg, #222222c7 0, rgb(34 34 34 / 0) 100%);}
.screening .screening_silde_wrapper .swiper {overflow:visible}

.screening .screening_silde_wrapper .swiper-2  {margin-top: 6em;}
.screening .screening_silde_wrapper .swiper-wrapper { transition-timing-function: linear; }
.screening .screening_silde_wrapper .swiper-slide { display: flex; align-items: center; justify-content: center; font-size:1em; }
.screening .screening_silde_wrapper .swiper-slide .movie_card {position: relative;width: 100%;}
.screening .screening_silde_wrapper .swiper-slide .movie_card  a { display:block; width: 100%; height: 100%;}
.screening .screening_silde_wrapper .swiper-slide .movie_card .thumb {position:relative; width: 100%;aspect-ratio: 131/85;border: 1px solid rgba(255, 255, 255, 0.10); align-content:center; transition:0.3s ease-in-out; }
.screening .screening_silde_wrapper .swiper-slide .movie_card .thumb a img { width:100%; height:100%; object-fit:cover; transition:0.3s ease-in-out; filter: brightness(1);}
.screening .screening_silde_wrapper .swiper-slide .movie_card .thumb .wp {position:absolute; top:0; left:0; display:inline-block; padding:0.33em 0.66em;  font-size:1.4em; color:#fafafa; font-weight:600; background-color:var(--biff-red); z-index:1; }
/* .screening .screening_silde_wrapper .swiper-slide .movie_card .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; } */
.screening .screening_silde_wrapper .swiper-slide .movie_card .thumb::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(180deg, rgba(0, 0, 0, 0.20)  0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.80) 100%), rgba(0, 0, 0, 0.30);pointer-events: none; /* 클릭 방지 */display: none;}
.screening .screening_silde_wrapper .swiper-slide .movie_card .thumb .synopsis {  display:block; position: absolute; width:100%; height:100%; align-content:center; bottom: 0;   padding:0  2em ;   color: #fafafa;  font-size: 1.6em; font-weight: 300; line-height: 180%; text-overflow: ellipsis; white-space: normal; opacity:0;  transition:0.3s ease-in-out; }
.screening .screening_silde_wrapper .swiper-slide .movie_card .thumb .synopsis dl {}
.screening .screening_silde_wrapper .swiper-slide .movie_card .thumb .synopsis dt {margin-bottom:1em; font-size:1em; font-weight:bold;}
.screening .screening_silde_wrapper .swiper-slide .movie_card .thumb .synopsis dd {display: -webkit-box; -webkit-box-orient: vertical;  -webkit-line-clamp: 4; overflow: hidden;  height: 7em; font-weight:400;}


.screening .screening_silde_wrapper .swiper-slide .movie_card.more .thumb {width: 100%;aspect-ratio: 131/85;border: 1px solid rgba(0, 0, 0, 0.2);}
.screening .screening_silde_wrapper .swiper-slide .movie_card.more .thumb div {position:absolute; display:block; width:100%; height:100%; align-content:center; text-align:Center; font-size:2.6em; line-height:1.2; color:#fafafa; z-index:1;}
.screening .screening_silde_wrapper .swiper-slide .movie_card.more .thumb div b {color:var(--biff-red)}

.screening .screening_silde_wrapper .swiper-slide .movie_card .card_trailer {position: absolute;bottom: 1ex;right: 1ex;display: flex;align-items: center;padding: 0 2ex 0 .7ex;font-size: 1.6em;line-height: 1.2;color:#fff;background-color: #0000006e;backdrop-filter: blur(3px);border-radius: 50em;z-index: 10;border: 1px solid rgba(255,255,255,0.1); transition:all 0.5s;}
.screening .screening_silde_wrapper .swiper-slide .movie_card .card_trailer:hover {background-color:#d5001070;}



.screening .screening_silde_wrapper .swiper-slide .movie_card:hover { transition:0.3s ease-in-out; }
.screening .screening_silde_wrapper .swiper-slide .movie_card:hover .thumb img { transition:0.3s ease-in-out; filter: brightness(1);}
.screening .screening_silde_wrapper .swiper-slide .movie_card:hover .card_trailer {border-color:rgba(255,255,255,0.1)}

/* 메인 호버 시 시놉시스 노출 관련 css  */
.screening .screening_silde_wrapper .swiper-slide .movie_card:has(.synopsis):hover .thumb::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display:block; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(7.5px); transition:0.3s ease-in-out; z-index:1; }
.screening .screening_silde_wrapper .swiper-slide .movie_card:has(.synopsis):hover .thumb .keywords { display:none; }
.screening .screening_silde_wrapper .swiper-slide .movie_card:has(.synopsis):hover .thumb .synopsis { opacity:1; z-index:2; }
.screening .screening_silde_wrapper .swiper-slide .movie_card .card_trailer:hover,
.screening .screening_silde_wrapper .swiper-slide .movie_card .card_trailer:focus { background-color: var(--biff-red); }
 /* 메인 호버 시 시놉시스 노출 관련 css  */

.screening .screening_silde_wrapper .swiper-slide .movie_card .card_content {display: flex;flex-direction: column;justify-content: space-between;align-items: flex-start; gap:3rem; width: 100%;height:100%;padding: 2em 0 0;box-sizing: border-box;}
.screening .screening_silde_wrapper .swiper-slide .movie_card .sub {font-size: 1.5em;color: #aaa;font-weight: 400;letter-spacing: -0.02em;margin-top: 1.5ex;line-height: 120%;}
.screening .screening_silde_wrapper .swiper-slide .movie_card .m_tit {display: flex;align-items: center;gap: 1ex;font-size: 1.8em;font-weight: 700;color: #fafafa;line-height: normal;text-align:left;}

.screening .screening_silde_wrapper .swiper-slide .movie_card .card_line {display:flex; align-items:center; width:100%; height:1px; background-color:rgba(255,255,255,0.2)}
.screening .screening_silde_wrapper .swiper-slide .movie_card .card_line span {display:block; width:0%; height:1px; margin:0 auto 0 0 ; background-color:var(--biff-red); /* opacity:0; */ transition:all 0s;}
.screening .screening_silde_wrapper .swiper-slide .movie_card:hover  .card_line span {/* opacity:1; */ width:100%; transition:all 3s ease;}



/* EVENT */
.event {padding:8em 0; font-size:10px;  background: linear-gradient(180deg, #000 0%, #222 100.09%);}
.event .container-xxl {position:relative;}

.event .container-xxl:not(.tittle-area):before,
.event .container-xxl:not(.tittle-area):after { content: ""; position: absolute;bottom: 0; display: block; width: calc((100vw - 100% + 3rem) / 2); height: 100%;  z-index: 2;}				
/* .event .container-xxl:not(.tittle-area):before { left: calc(0px - ((100vw - 100% + 3rem) / 2)); background: linear-gradient(90deg, #000 0%, rgba(0,0,0,0) 100%);} */
.event .container-xxl:not(.tittle-area):before { left: calc(0px - ((100vw - 100% + 3rem) / 2)); background:url(/kor/img/main/event_grad_l.png) no-repeat; background-size:cover; ;}
/* .event .container-xxl:not(.tittle-area):after {right: calc(0px - ((100vw - 100% + 3rem) / 2));background: linear-gradient(270deg, #1f1f1f 0%, rgba(0, 0, 0, 0) 100%);} */
.event .container-xxl:not(.tittle-area):after {right: calc(0px - ((100vw - 100% + 3rem) / 2));background:url(/kor/img/main/event_grad_r.png) no-repeat; background-size:cover; ;}

.event .event-inner {display: flex; gap: 18rem; }
.event .event_slide {width: 100%;height: 100%;}
.event .swiper-container { width: 100%; height: 100%; overflow: visible;}
.event .event_slide .swiper-wrapper { display: flex; }
.event .event_slide .swiper-wrapper .swiper-slide {  width: 100%; font-size:1em; box-sizing: border-box;}

.event .event_slide .event_card {aspect-ratio: 1 / 1;position: relative;width: 100%;overflow: hidden;border-radius: 0;border: 1px solid rgba(255, 255, 255, 0.20);background-color: #000;z-index: 1;}
.event .event_slide .event_card  a {display: block;width: 100%;height: 100%;align-content: end;}
.event .event_slide .event_card .thumb {position: absolute;top: 0;left: 0;width: 100%;height: calc(100% - 1px);overflow: hidden;z-index: -1;}
.event .event_slide .event_card .thumb img {width: 100%;height: 100%;object-fit: cover;object-position: center;filter: grayscale(100%);}
.event .event_slide .event_card .thumb:before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(180deg, rgba(0, 0, 0, 0)  50%, rgba(0, 0, 0, 0.50) 70%, rgba(0, 0, 0, 0.80) 100%), rgba(0, 0, 0, 0.10);pointer-events: none; /* 클릭 방지 */display: none;}

.event .event_slide .event_card .card_content {display: flex;flex-direction: column;justify-content: flex-end;align-items: flex-start;width: 100%;height: auto;padding: 2em 3em;box-sizing: border-box;background: #000;}
.event .event_slide .event_card .sub {color: var(--biff-red);font-size: 1.5em;font-weight: 700;line-height: 1.2;padding: 0;border-radius: 0;}
.event .event_slide .event_card .m_tit {width:100%;font-size: 2em;font-weight: 700;color: #fafafa;line-height: normal;margin-top:1rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.event .event_slide .event_card .date { position:absolute; top:0; right:0; display:block; padding:0.7em 0.85em ;font-size: 1.4em; color:#fafafa; background-color: var(--biff-red-v2); font-weight: 700; line-height: 1; }

.event .event_slide .event_card:hover { border: 1px solid var(--biff-red); transition:0.3s ease-in-out; }


/* EVENT COMING SOON*/
.event:has(.event_cms) {padding-bottom:10em;}
.event:has(.event_cms) .tittle-area {margin-bottom:0;}
.event .event_cms {position:relative;display:flex;justify-content:center;align-items:center;width:100%;text-align:center;background-repeat:no-repeat;background-attachment: fixed;background-position: right; background-size:contain;}
.event .event_cms .bg_layer {width:100%;padding: 17rem 0;}
.event .event_cms .txt {width: 10.5em; height: 1em; position: relative; bottom: 0; left: 0; top: 0; right: 0; margin: auto; font-size:4.6vw; font-weight:900;line-height:1;}
.event .event_cms .txt strong {}
.event .event_cms .txt b {color:#FF4F59;}
.event .event_cms  #words { position: absolute; font-size:4.6vw; display: inline-block; white-space: nowrap; font-weight: bold; overflow: hidden; top: 0; left: 0; color: #fff; animation: textreveal 4s infinite alternate; }
.event .event_cms  #ball { position: absolute; top: -1ex; left: 0; height: 9.2vw; width: 9.2vw; white-space: nowrap; overflow: hidden; background-color: #FFF; border-radius: 50%; animation: ballmove 4s infinite alternate; z-index: 1; box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.3); }
/* Ball movement animation */
@keyframes ballmove {
  0% { transform: translate(0px, 1ex) scale(0.1); }
  10% { transform: translateX(0px) scale(0.5); }
  40% { transform: translateX(9.2em) scale(0.5); }
  60% { transform: translate(9.2em, 0.8ex) scale(0.1); }
  70% { transform: translate(9.2em, 0.8ex) scale(0.15); }
  80% { transform: translate(9.2em, 0.8ex) scale(0.1); }
  90% { transform: translate(9.2em, 0.8ex) scale(0.15); }
  100% { transform: translate(9.2em, 0.8ex) scale(0.1); }
}
/* Text reveal animation */
@keyframes textreveal {
  0% { width: 0; }
  10% { width: 0; }
  40% { width: 9.5em; }
  100% { width: 9.5em; }
}
@media screen and  (min-width:2000px) {
	.event .event_cms .txt,
	.event .event_cms #words {font-size:7.6rem;}
	.event .event_cms #ball {width:15.2rem; height:15.2rem;}
}
@media screen and (max-width: 1200px) {
	.event .event_cms .bg_layer {padding:10rem 0 5rem; background:linear-gradient(180deg, #000000b5, #00000000)}
	/* .event .event_cms .txt {margin: 0 4rem 0 auto;} */
	.event .event_cms .txt,
	.event .event_cms #words {font-size:6.6vw;}
	.event .event_cms #ball {width:13.2vw; height:13.2vw;}	
}
@media screen and (max-width: 768px) {

	
	
	.event .event_cms {background-attachment:inherit;}
	.event .event_cms .bg_layer {padding:10rem 0; background:linear-gradient(180deg, #00000052, #00000000); }
	.event .event_cms .txt {margin:0 auto;}
}



/* MEDIA & STORY */
.MediaStory {padding:8em 0; font-size:10px;  background: linear-gradient(180deg, #000 0%, #222 100.09%);} 
/* .MediaStory { background:#222; padding:8em 0 20em; font-size:10px;} */
.MediaStory > div { display:flex; justify-content:space-between; gap: 7em; }
.MediaStory .left, .MediaStory .right  { max-width: 50%; width: 100%; }
.MediaStory .left .media_top  { border:1px solid rgba(255,255,255,0.2); background:#000; transition: 0.3s ease-in-out; }
.MediaStory .left .media_top:hover  { border:1px solid var(--biff-red); }
.MediaStory .left .media_top .txtbox { padding:2em 3em; display:flex; gap:2em; align-items: center; }
.MediaStory .left .media_top .txtbox .tit { font-size:1.8em; line-height:150%; letter-spacing:-1px; font-weight:600; color:#fafafa; overflow: hidden; text-overflow: ellipsis; max-height:5.4rem; display: -webkit-box; -webkit-line-clamp: 2; /* 최대 줄 수를 지정 */ -webkit-box-orient: vertical; }
.MediaStory .left .media_bottom { margin-top:3em; }
.MediaStory .left .media_bottom .swiper-wrapper { display:flex; gap:2em; }
.MediaStory .left .media_bottom .swiper-slide { width: calc((100% - 2em * 2) / 3) !important;  flex-shrink: 0; }
.MediaStory .left .media_bottom .y_list { width: 100%;  aspect-ratio: 16 / 9;  overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); }
.MediaStory .left .media_bottom .y_list:hover { border: 1px solid var(--biff-red); transition: 0.3s ease-in-out; }
.MediaStory .left .media_bottom .y_list img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.MediaStory .right .story_top a { display:block; border:1px solid rgba(255,255,255,0.2); transition: 0.3s ease-in-out; position:relative; }
.MediaStory .right .story_top a:hover  { border:1px solid var(--biff-red); }
.MediaStory .right .story_top .thumb { width: 100%;  aspect-ratio: 16 / 9; overflow: hidden; z-index: 0; }
.MediaStory .right .story_top .thumb:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0)  30%, rgba(0, 0, 0) 100%); pointer-events: none; /* 클릭 방지 */}
.MediaStory .right .story_top .thumb img { width: 100%; height: 100%;  object-position: center center; }
.MediaStory .right .story_top .txtbox { position:absolute; bottom: 0; padding:3em; z-index: 1; }
.MediaStory .right .story_top .txtbox .t1 { color:var(--biff-red); font-size:1.5em; line-height:100%; font-weight:600; }
.MediaStory .right .story_top .txtbox .t2 { color:#fafafa; font-size:2.4em; line-height:100%; font-weight:600; margin-top:1ex; }
.MediaStory .right .story_top .txtbox .t3 { color:#ddd; font-size:1.6em; line-height:150%; margin-top:1.5em; overflow: hidden; text-overflow: ellipsis; max-height:1.3em; display: -webkit-box; -webkit-line-clamp: 1; /* 최대 줄 수를 지정 */ -webkit-box-orient: vertical; max-width: 95%; }

.MediaStory .right .story_bottom { margin-top:3em; }
.MediaStory .right .story_bottom a { display: block; margin-bottom: 0.2em; }
.MediaStory .right .story_bottom a:last-child { margin-bottom: 0; }
.MediaStory .right .story_bottom .list { display: flex; margin-bottom: 0.2em; }
.MediaStory .right .story_bottom .list .thumb { aspect-ratio: 25 / 10; overflow: hidden; width: 19.4em; }
.MediaStory .right .story_bottom .list .thumb img { width: 100%; height: 100%; }
.MediaStory .right .story_bottom .list .txtbox { display: flex; background: #000; flex: 1; padding: 3em 2em; justify-content: space-between; align-items: center; }
.MediaStory .right .story_bottom .list .txtbox .t1 { font-size:1.7em; font-weight:600; line-height:100%; color:#fafafa; overflow: hidden; text-overflow: ellipsis; max-height:1.17em; display: -webkit-box; -webkit-line-clamp: 1; /* 최대 줄 수를 지정 */ -webkit-box-orient: vertical; max-width: 75%; transition: 0.3s ease-in-out;}
.MediaStory .right .story_bottom a:hover .list .txtbox .t1 { color:var(--biff-red); }
.MediaStory .right .story_bottom .list .txtbox .t2 { font-size:1.4em; font-weight:600; line-height:100%; color:#aaa; }


/* SNS */
.main_sns { border-bottom:1px solid #dddddd26; padding:10em 0; font-size:10px;}
.main_sns .container-xxl {display:flex; justify-content:space-between; gap:rem;}
.main_sns .biff_sns, .newsletter{display:flex; width:calc(50% - 1.2em);vertical-align:top; align-items: center; }
.main_sns .m_sns {display:inline-block; }
.main_sns .m_sns:first-child {display:inline-block; padding-right:10em;}
.main_sns .snslink{display:inline-block;}
.main_sns .snslink:after{content:'';display:block;clear:both;}
.main_sns .snslink li{position:relative; display:inline-block; margin-right:2em;}
.main_sns .snslink li:last-child{margin-right:0;}
.main_sns .snslink li a {display:block;text-align:center; width:7em; height:7em; border-radius:50%; transition:all 0.3s ease; background-position:50% 50%; background-repeat:no-repeat;}
.main_sns .snslink li:nth-child(1) a{background-color:#1f68b6; background-image:url(/kor/img/main/sns_i_facebook.svg);}
.main_sns .snslink li:nth-child(2) a{background-color:#292929; background-image:url(/kor/img/main/sns_i_twitter.svg?1);}
.main_sns .snslink li:nth-child(3) a{background-color:#c71f7e; background-image:url(/kor/img/main/sns_i_instagram.svg);}
.main_sns .snslink li:nth-child(4) a{background-color:#e8151b; background-image:url(/kor/img/main/sns_i_youtube.svg);}
.main_sns .snslink li:hover a{background-color:#2d2d2d;}

/* Newsltter */
.main_sns .newsletter{display:flex; align-items:center; justify-content:space-between; margin-right:0;}
.main_sns .m_newsletter .formbox {width:43em;; margin:3.5em auto;}
.main_sns .m_newsletter form {height:6em; background:#f1f1f1; margin-bottom:1em; text-align:left;}
.main_sns .m_newsletter .formbox .btn_more {float:right;font-size:1.4em;color:#888;}
.main_sns .m_newsletter .formbox .btn_more:hover {text-decoration:underline;color:#444}

.main_sns .section_tit h3{color:#ccc; font-size:4em; letter-spacing:-1px; font-weight:600;}
.main_sns .section_tit p{ color:var(--biff-red); font-size: 1.5em; font-weight: 500; }
.main_sns .newsletter_btn{float:right; padding:0; vertical-align:top; margin-top:1em;}
.main_sns .newsletter_btn a.btn{position:relative; padding:1em 2em; color:#fafafa; font-size: 1.8em; line-height:1.5; transition:all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.2);  border-radius: 0; }
.main_sns .newsletter_btn a.btn svg {width:0.8em; height:0.8em; margin-left:1ex;  stroke-width:3px; }
.main_sns .newsletter_btn a.btn:hover{background:var(--biff-red);}


/* 패밀리 사이트 */
.family { margin-bottom:5rem; }
.family .pg-slide .slick-list {margin:0 auto;width:2400px}
.family .pg-slide { margin:0;}
.family .pg-slide .card_li {position:relative; background:#151515; height:auto; /* padding-bottom:2rem; */}
.family .pg-slide .card_li {width:360px;margin-right:10px;margin-left:10px; float:left; }
.family .pg-slide .card_li .txtbox { font-size:18px; padding:25px; height:220px; color:#fff;}
.family .pg-slide .card_li .txtbox .tits { color:#FF4F59; font-size:1.4rem; font-weight:600; display: block; }
.family .pg-slide .card_li .txtbox .tit1 { font-size:2.5rem; display: block; padding: 0.5rem 0 1rem; }
.family .pg-slide .card_li .txtbox .tit2 { color:#aaa; font-size:1.6rem; white-space:pre-wrap; display: block;}
.family .pg-slide .card_li .txtbox .tit3 { color:#ccc; font-size:1.4rem;}
.family .pg-slide .card_li a.cover {display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:10; border:1px solid rgba(255, 255, 255, 0.10)}
.family .pg-slide .card_li a.cover:hover { border:1px solid #ff0000 } 
.family .pg-slide .card_li .thumb { width: 100%; height: auto; aspect-ratio: 3 / 2; }
.family .pg-slide .card_li .thumb img {width:100%;height: 100%;object-fit: cover; }
/*  .pg-slide .card_li .thumb img:hover{transform: scale(1.7);}  */

.family .pg-slide .card_li .pg_tit {font-size:24px;font-weight:bold;}
.family .pg-slide .card_li .desc {font-size:15px;line-height:1.6; color:#999;}

@media (min-width: 480px) {
	.family  .pg-slide { margin:40px -10px;}
	.family .pg-slide .card_li .txtbox { height:220px; }
}


/*ARCHIVE*/

/* .archive {padding:8em 0; font-size:10px;  background: linear-gradient(180deg, #000 0%, #222 100.09%);} */
.archive { background:#222; padding:8em 0 20em; font-size:10px;}
.archive .container-xxl {position:relative;}

.archive .container-xxl:not(.tittle-area):before,
.archive .container-xxl:not(.tittle-area):after { content: ""; position: absolute;bottom: 0; display: block; width: calc((100vw - 100% + 3rem) / 2); height: 100%;  z-index: 2;}				
/* .archive .container-xxl:not(.tittle-area):before { left: calc(0px - ((100vw - 100% + 3rem) / 2)); background: linear-gradient(90deg, #000 0%, rgba(0,0,0,0) 100%);} */
/* .archive .container-xxl:not(.tittle-area):before { left: calc(0px - ((100vw - 100% + 3rem) / 2)); background:url(/kor/img/main/event_grad_l.png) no-repeat; background-size:cover; ;} */
/* .archive .container-xxl:not(.tittle-area):after {right: calc(0px - ((100vw - 100% + 3rem) / 2));background: linear-gradient(270deg, #1f1f1f 0%, rgba(0, 0, 0, 0) 100%);} */
/* .archive .container-xxl:not(.tittle-area):after {right: calc(0px - ((100vw - 100% + 3rem) / 2));background:url(/kor/img/main/event_grad_r.png) no-repeat; background-size:cover; ;} */

.archive .archive-inner {display: flex; gap: 18rem; }
.archive .archive_slide {width: 100%;height: 100%;}
.archive .swiper-container { width: 100%; height: 100%; overflow: visible;}
.archive .archive_slide .swiper-wrapper { display: flex; }
.archive .archive_slide .swiper-wrapper .swiper-slide {  width: 100%; font-size:1em; box-sizing: border-box;}

.archive .archive_slide .archive_card {aspect-ratio: 4/7;position: relative;width: 100%;overflow: hidden;border-radius: 0;border: 1px solid rgba(255, 255, 255, 0.20);background-color: #000;z-index: 1;}
.archive .archive_slide .archive_card  a {display: block;width: 100%;/* height: 100%; */align-content: end;}
.archive .archive_slide .archive_card .thumb {/* position: absolute; *//* top: 0; *//* left: 0; */width: 100%;height: 100%;/* height: calc(100% - 1px); */overflow: hidden;z-index: -1;}
.archive .archive_slide .archive_card .thumb img {width: 100%;height: 100%;object-fit: cover;object-position: center; }
.archive .archive_slide .archive_card .thumb:before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(180deg, rgba(0, 0, 0, 0)  50%, rgba(0, 0, 0, 0.50) 70%, rgba(0, 0, 0, 0.80) 100%), rgba(0, 0, 0, 0.10);pointer-events: none; /* 클릭 방지 */display: none;}

.archive .archive_slide .archive_card .card_content {display: flex;flex-direction: column;width: 100%;height: auto;padding: 1.6rem 2rem;box-sizing: border-box;background: #0000008c;}
.archive .archive_slide .archive_card .sub {color: var(--biff-red);font-size: 1.2rem;font-weight: 700;line-height: 1.2;padding: 0;border-radius: 0;}
.archive .archive_slide .archive_card .m_tit {width:100%;font-size: 1.5rem;font-weight: 700;color: #fafafa;line-height: normal;margin-top: .5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.archive .archive_slide .archive_card .date {position:absolute;top:0;right:0;display:block;padding: 0.8em 0.8em;font-size: 1.2em;color:#fafafa;background-color: var(--biff-red-v2);font-weight: 700;line-height: 1;}

.archive .archive_slide .archive_card:hover { border: 1px solid var(--biff-red); transition:0.3s ease-in-out; }








@media (max-width:1750px) {
	#visual,
	.tittle-area,
	.event_upcoming,
	.community, 
	.selections,
	.screening,
	.event,
	.main_sns,
	.MediaStory	{font-size:0.6vw}
				
	.community .box_board .box li a {padding:2em;}
				
	.screening .container-xxl:not(.tittle-area):before,
	.screening .container-xxl:not(.tittle-area):after {}				
	.screening .container-xxl:not(.tittle-area):before {left: 0;}
	.screening .container-xxl:not(.tittle-area):after {right: 0;}

	.event .container-xxl:not(.tittle-area):before,
	.event .container-xxl:not(.tittle-area):after { }				
	.event .container-xxl:not(.tittle-area):before { left: 0;}
	.event .container-xxl:not(.tittle-area):after {right: 0;}
	
	.MediaStory > div {justify-content: center; gap:3em;}
}

@media (max-width: 1680px) {
	.selections .selec-swiper:before,
	.selections .selec-swiper:after  {width:calc(((100% - 60px) / 1.4) * 0.2);}
}

@media (max-width: 1440px) {
	#visual,
	.tittle-area,
	.event_upcoming,
	.community, 
	.selections,
	.screening,
	.event,
	.main_sns,
	.MediaStory	{font-size:0.57vw}
	
}

@media (max-width: 1240px) {
	#visual,
	.tittle-area,
	.event_upcoming,
	.community, 
	.selections,
	.screening,
	.event,
	.main_sns,
	.MediaStory	{font-size:0.77vw}
	
	#visual {background-position:right -8em top -5.9em;}
	#visual .banner-slider .banner {flex:none;}
	#visual .banner-slider .banner a {padding:3em; }
	#visual .banner-slider .banner .txtbox .t_tit {font-size:2.4em;}	
	#visual .banner-logo {padding:12em 0 5em;}
	#visual .banner-logo img{max-width:66%;}
	
	.community .box_board .box li a {padding:2em;}
	.community .box_board .box li .cate {margin-bottom:1ex;}
	.community .box_board .box li .tit {-webkit-line-clamp:4; }
	.community .box_board .box li .desc {display:none;}	
	
	.MediaStory .right .story_top .txtbox {padding:3em;}
	.MediaStory .right .story_bottom .list .txtbox {flex-direction:column; justify-content: center; align-items:flex-start; gap:10px; padding:0 2em}
	.MediaStory .right .story_bottom .list .txtbox .t1 {max-width:100%;}
	
	.main_sns {padding:7em 0;}
	.main_sns .biff_sns, 
	.main_sns .newsletter {flex-direction:column; justify-content:flex-start;  align-items: flex-start; gap:2em;}
}

@media (max-width: 1200px) {
	.selections .selec-swiper:before,
	.selections .selec-swiper:after  {width:calc(((100% - 40px) / 1.2) * 0.1);}
	
}

@media (max-width: 1080px) {
	#visual,
	.tittle-area,
	.event_upcoming,
	.community, 
	.selections,
	.screening,
	.event,
	.main_sns,
	.MediaStory	{font-size:0.75vw}
	
	
	.community .box_board {width:75%; flex-direction:column;}
	.community .box_board .box {width:100%;}
	.community .box_board .box li {aspect-ratio: 2 / 1;}
	.community .box_board .box2 li a:not(:hover) {border-top:1px solid rgba(255,255,255,0);}
	.community .box_board .box li:nth-child(n+3) {display:block;}
	.community .box_board .box li a {padding:1.5em; }
	.community .box_board .box li .arr {width:4em; height:4em;}
	.community .box_board .box li .cate {margin-bottom: 0.25ex; font-size:1.4em;}
	.community .box_board .box li .tit {-webkit-line-clamp: 2;margin-bottom: 1ex; font-size:1.8em; }
	.community .box.sponsor {width:25%; margin-left:-1px;}
	
	.MediaStory > div { flex-direction: column; align-items: center; gap:8em; }
	.MediaStory .left, 
	.MediaStory .right  { max-width: 100%; }
}

@media (max-width: 1024px) {
	.selections .selec-swiper:before,
	.selections .selec-swiper:after  {width:calc(((100% - 10px) / 1.1) * 0.05);}
}

@media (max-width: 920px) {
	#visual,
	.tittle-area,
	.event_upcoming,
	.community, 
	.selections,
	.screening,
	.event,
	.main_sns,
	.MediaStory	{font-size:0.9vw}
	
	#visual .banner-logo img {height:auto;}
	
	.selections .tittle-area .tit {font-size:5em;}
	
}

@media (max-width: 768px) {
	#visual,
	.tittle-area,
	.event_upcoming,
	.community, 
	.sub_banner,
	.selections,
	.screening,
	.event,
	.main_sns,
	.MediaStory	{font-size:1vw}
	
	.tittle-area .tit small {display:none;}
	
	#visual {        background-position: right -8em top -0.9em; background-size: 63.7em;}
	#visual .banner-wrap {overflow:visible;}
	#visual .banner-slider .banner a { border:1px solid rgba(255,255,255,0.2)}
	
	.event {padding:8em 0 0}
	.event_upcoming {background-color:transparent;}
	.event_upcoming .container-xxl {flex-direction:column;}
	.event_upcoming .tit{width:100%; flex-direction:row; justify-content:space-between; align-items: flex-start; padding:0; margin-bottom:1ex;}
	.event_upcoming .tit:before {display:none;}
	.event_upcoming .tit a {font-size:1.7em; gap:1ex}
	.event_upcoming .upcoming {width:100%;}
	.event_upcoming .upcoming .swiper-wrapper {overflow:visible}
	.event_upcoming .coming_list .swiper-slide {width:40%;}
	.event_upcoming .coming_list .swiper-slide > a {height:14em;}
	.event_upcoming .coming_list .schedule {display:flex; gap:1em; align-items: center;}
	.event_upcoming .coming_list .schedule .date {position:relative; padding:0.5ex 1.5ex; font-size:1.4em; }
	.event_upcoming .coming_list .subject {font-size:2em;}

	.sub_banner {display:block; margin-top:3em; }
	#visual + .sub_banner {margin-top:10em}
	.sub_banner .swiper-subBnr {position:relative; width:100%; background-color:#000; aspect-ratio:363 / 115; overflow:visible;}
	.sub_banner a {width:100%; height:100%; color:#fafafa;  background-color:#000; background-size:cover; background-position:center;}
	.sub_banner a > div {position:relative; width:100%; height:100%; padding:3em; align-content:center;border:1px solid rgba(255,255,255,0.15); }
	.sub_banner a > div span {position:absolute; top:0; right:0; display:inline-block; padding:0.33em 0.66em;  font-size:1.5em; color:#fafafa; font-weight:700; background-color:rgba(226,0,17,0.5);}
	.sub_banner a > div p {margin-bottom:0.25ex; font-size:2.4em; font-weight:400;}
	.sub_banner a > div strong{font-size:3.2em;}
	.sub_banner .swiper-container-horizontal>.swiper-pagination-bullets {position: absolute;display: flex;right: 2em;bottom: 2em; padding-top: 0;justify-content: flex-end;width: auto;gap: 4px;}
	.sub_banner .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {flex:none;width: 6px;height: 6px;border-radius: 50em; margin:0;}
	.sub_banner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {background-color:var(--biff-red) !important;}
	
	
	.community {padding: 8em 0;}
	.community .box_board {width:66.66%}
	.community .box_board .box li:nth-child(n+3) {display:none;}
	.community .box.sponsor {width:33.33%;}
	
	
	.selections {display:none;}
	
	.screening .screening_silde_wrapper .swiper-slide .movie_card .card_trailer { font-size:2em; }
	.screening .screening_silde_wrapper .swiper-slide .movie_card .card_trailer small {font-size:0.9em;}
	.screening .screening_silde_wrapper .swiper-slide .movie_card:hover .card_trailer {border-color:rgba(255,255,255,0.1)}
	.screening .screening_silde_wrapper .swiper-2 {display:none;}
	
	.event .container-xxl:not(.tittle-area):before, 
	.event .container-xxl:not(.tittle-area):after {display:none;}
	
	.MediaStory .left, .MediaStory .right { max-width: 100%; }
	
}

@media only screen and (max-width: 540px) {
	#visual,
	.tittle-area,
	.event_upcoming,
	.sub_banner,
	.community, 
	.selections,
	.screening,
	.event,
	.main_sns,
	.MediaStory	{font-size:1.8vw}

	.tittle-area .tit {font-size:3em;}
	
	.swiper-pagination { display:flex; padding-top:2em;}
	 
	.event_upcoming .coming_list .swiper-slide {width:80%;}
	.event_upcoming .coming_list .swiper-slide > a {border-top:2px solid transparent; }
	.event_upcoming .coming_list .swiper-slide > a:has(.today) {border-top:2px solid var(--biff-red);}
	

	.screening .screening_silde_wrapper .swiper-slide .movie_card .card_line {display:none;}
	.screening .swiper-pagination-progressbar {position:relative; padding-top:0; margin-top:5em; height:2px; background-color:rgba(255,255,255,0.1)}	
	.screening .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background-color:var(--biff-red);}
		
	.community .boxes {flex-direction:column; transform:translateX(0); gap:5em;}	 
	.community .box_board {gap:2em;}
	.community .box_board {width:100%; flex-direction:column;}
	.community .box_board .box {width:100%;}
	.community .box_board .box .mo_tit {display:flex; justify-content:space-between; align-items:baseline; margin-bottom:1ex; font-size:2em;} 
	.community .box_board .box .mo_tit b {color:var(--biff-red)}
	.community .box_board .box .mo_tit a {color:#fff;}
	.community .box_board .box .mo_tit svg {stroke-width:2px; }
	.community .box_board .box ul {display:block; margin-left:0; padding-bottom:1ex; white-space:nowrap;margin-left:-2em; margin-right:-2em; padding-left:2em; padding-right:2em; overflow-x:auto; }
	.community .box_board .box ul::-webkit-scrollbar {height:3px;}
	.community .box_board .box ul::-webkit-scrollbar-track {background-color:transparent; opacity:0;}
	.community .box_board .box ul::-webkit-scrollbar-thumb {background-clip: padding-box; background-color:rgba(255,255,255,0.2); border-radius:50em;border-left:2em solid transparent; border-right:2em solid transparent;}  
	.community .box_board .box li {display:inline-block; width:70%; aspect-ratio: auto; margin-left:0; margin-right:1em; }
	.community .box_board .box li:last-child {margin-right:0;}
	.community .box_board .box li:nth-child(n+3) {display:inline-block;}
	.community .box_board .box li a {padding:2em; border:1px solid rgb(255 255 255 / 20%); border-top:1px solid rgb(255 255 255 / 20%) !important;}
	.community .box_board .box li .cate {display:none;}
	.community .box_board .box li .tit {white-space: normal; margin-bottom:1em;}
	.community .box.sponsor {width:100%; border:none; aspect-ratio:auto;}
	.community .box.sponsor .swiper-spon-gold {border:none; overflow:visible}
	.community .box.sponsor a {width:100%; aspect-ratio:1 / 1 ;border:1px solid rgba(255,255,255,0.2);}
	.community .box.sponsor .swiper-pagination {position:relative; left:0; right:0; bottom:-1.5em;     justify-content: center;}
	.community .box.sponsor .swiper-pagination .swiper-pagination-bullet {background-color:#fafafa; }
	
	.sub_banner a > div p {font-size:1.9em; }
	.sub_banner a > div strong{font-size:2.2em;}
	
	.event .event-inner {gap:0; padding-left:0;}
	.event .swiper-container { overflow:hidden}
	.event .event_slide {position:relative; width:100%;}
	.event .event_slide .event_card .card_content { padding: 2rem; }
	.event .event_slide .event_card .m_tit { font-size: 1.6rem; margin-top: 0.8rem; }
	.event .event_slide .event_card .date { font-size: 1.2rem;}	
	.event .event_slide .swiper-pagination {gap:1ex;}
	
	.MediaStory { padding:8em 0 8em; }
	.MediaStory > div {gap:6em;}
	.MediaStory .left .media_top, 
	.MediaStory .right .story_bottom { display:none; }
	.MediaStory .left .media_bottom {position:relative;}
	.MediaStory .left .media_bottom.swiper-container-horizontal>.swiper-pagination-bullets {position:relative; bottom:auto;}
	.MediaStory .left .media_bottom.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin:0;}
	.MediaStory .left .media_bottom .swiper-wrapper { gap:0; }
	.MediaStory .left .media_bottom .swiper-slide { width: 100% !important; }
	.MediaStory .right .story_top .txtbox {padding:3em;}
	.MediaStory .right .story_top .txtbox .t2 { line-height:150%; }
	.MediaStory .right .story_top .txtbox .t3 { display:none; }
	
	.main_sns .section_tit h3 {font-size:3em;}
	.main_sns .container-xxl  {flex-direction:column; gap:4em;}
	.main_sns .biff_sns, 
	.main_sns .newsletter { width:100%; align-items:center; }
	.main_sns .m_sns:first-child { padding-right:0;}
	.main_sns .section_tit { text-align: center; }
	
}





/* popup */

.popupcontent {width:480px; margin:auto; border:solid 1px #ccc; }

@media (max-width:768px){
	.popupcontent {width:100%; margin:auto; border:solid 1px #ccc; }
}

.popupcontent_ { margin-left:50px;}

@media (max-width:768px){
	.popupcontent_ { margin-left:0px; margin-bottom:5px;}
}

.popup_warp {position:absolute; top:30px; left:50px;  display:flex; flex-wrap:wrap; gap:1rem; max-width:90%; margin:0 auto; z-index:999999999999999999999999999999999999999999999999999;}

.popupm .cont {color:#333; background:#fafafa;}
.popupm .cont .top {background:#f4f4f4; border-bottom:1px solid #e9e9e9; font-size:2.2rem; letter-spacing:-0.03rem; color:#000; font-weight:800;  padding:2.5rem 2rem 2rem;}
.popupm .cont .exp {padding:2.5rem; font-size:1.6rem; font-weight:500;}
.popupm .cont .exp .bot {padding-top:2.5rem; padding-bottom:0.5rem; }
.popupm .cont .exp b {color:#DA1212; text-decoration:underline; font-weight:800;}
.popupm .cont .exp strong {color:#DA1212;font-weight:800;}
.popupm .pop_bot {background:#000; color:rgba(255, 255, 255, 0.8); text-align:left; font-size:1.4rem; padding:1rem 1.5rem; display:flex; justify-content:space-between; align-items: center;}
.popupm .pop_bot input[type="checkbox"] {width:1.8rem; height:1.8rem; border:none !important; margin-right:0.5rem;}
.popupm .pop_bot a {color:rgba(255, 255, 255, 0.7); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='rgba(255,255,255,0.6)' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18 18 6M6 6l12 12'/%3E%3C/svg%3E") 100% 52%/16px auto no-repeat; padding-right:2rem}

/* 2024-09-21 */
.popupm .cont .exp .tit {font-weight:700; color:#000; padding-bottom:1.5rem; }
.popupm .cont .exp .tit strong {display:block; font-size:17px;}
.popupm .cont .exp > ul {background:#fafafa3f3; padding:1.5rem 2rem; text-align:left; border-radius:12px; border: 1px solid #ffdede;}
.popupm .cont .exp > ul { margin-bottom:2rem;}
.popupm .cont .exp > ul li {position:relative; padding-left:10px;color:#000; font-size:15px; margin:2px 0;}
.popupm .cont .exp > ul li:before {content:''; position:absolute; top:9px; left:0; display:block; width:4px; height:4px; background:#333; border-radius:4px; color:#666;}
.popupm .cont .exp > ul li .comment {display:block; font-size:14px;}
.popupm .cont .exp .tx {font-size:15px;}


@media (max-width:1024px){
	.popup_warp {right:0; left:0;}
}

@media (max-width:768px){
	.popup_warp {flex-flow:column; align-items:center;}
	.popup_warp > .popup_box {width:100%; max-width:100%;}
}