@charset "utf-8"; /******************************************************************************************************************************************************************** ********************************************************************************************************************************************************************* [biff_programs.css] - 적용페이지 : 상영시간표(Schedule), 공식상영작(Selection) > 목록, 뷰, 작품검색 ********************************************************************************************************************************************************************* *********************************************************************************************************************************************************************/ /* ------------------------------------------------------------------------------------------------------------------------------------------------ START ) 공통 ------------------------------------------------------------------------------------------------------------------------------------------------ */ div[class*="visual2-"] { display:none;} .modalpopup { position:absolute; top:50%; left:50%; margin-left:-25px;margin-top:-25px; z-index:9999; display: inline-block; width: 100px; } #loading { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.7); z-index:9998;} .load-3 .line { display: inline-block; width: 15px; height: 15px; border-radius: 15px; background-color: #fff; } .load-3 .line:nth-last-child(1) {animation: loadingC .6s .1s linear infinite;} .load-3 .line:nth-last-child(2) {animation: loadingC .6s .2s linear infinite;} .load-3 .line:nth-last-child(3) {animation: loadingC .6s .3s linear infinite;} @keyframes loadingC { 0 {transform: translate(0,0);} 50% {transform: translate(0,15px);} 100% {transform: translate(0,0);} } /*------------------------------------------------ 상영등급 ------------------------------------------------*/ .grade {display:inline-block;background-position:0 center;background-repeat:no-repeat;font-size:0;vertical-align:middle} .badge_grade {display:inline-block;font-size:0.75rem;font-weight:bold;font-family: 'Inter', sans-serif;letter-spacing: 0 !important;width:24px;height:24px; border-radius: 100%;-webkit-border-radius: 100%;line-height:24px;text-align: center;} .badge_grade.grade_all {background: #2781e6} .badge_grade.grade_12 {background: #ced000} .badge_grade.grade_15 {background: #eaa500} .badge_grade.grade_18 {background: #ef0000} .ico_grade {position:relative;display: block;width: 32px;height: 18px;margin-right: 1rem;color: #fff;margin-right: 5px;border-radius: 0;font-size: 13px;text-align: center;align-items: center;color: #fff;font-weight: 500;letter-spacing: 0em; flex-shrink:0;} .ico_grade:last-child { margin-right: 0; } .ico_grade.ico_g, .select-custom.custom-sel-fliter .select-hidden.ico_124 + .select-styled:before, .select-custom.custom-sel-fliter .select-list li[rel="124"]:before {background-color: #4a9f4d;letter-spacing: -0.05em!important;font-size: 12px !important;} .ico_grade.ico_12, .select-custom.custom-sel-fliter .select-hidden.ico_125 + .select-styled:before, .select-custom.custom-sel-fliter .select-list li[rel="125"]:before {background-color: #f9b024;} .ico_grade.ico_15, .select-custom.custom-sel-fliter .select-hidden.ico_126 + .select-styled:before, .select-custom.custom-sel-fliter .select-list li[rel="126"]:before {background-color: #fd6c24;} .ico_grade.ico_19, .select-custom.custom-sel-fliter .select-hidden.ico_127 + .select-styled:before, .select-custom.custom-sel-fliter .select-list li[rel="127"]:before {background-color: #bd0f0f;} .ico_grade.ico_ke, .select-custom.custom-sel-fliter .select-hidden.ico_177 + .select-styled:before, .select-custom.custom-sel-fliter .select-list li[rel="177"]:before {background-color: #002a61;letter-spacing: -0.05em !important;font-size: 12px !important;} .ico_grade.ico_kn, .select-custom.custom-sel-fliter .select-hidden.ico_178 + .select-styled:before, .select-custom.custom-sel-fliter .select-list li[rel="178"]:before {background-color: #4e2593;letter-spacing: -0.05em !important;font-size: 12px !important;} .ico_grade.ico_kk, .select-custom.custom-sel-fliter .select-hidden.ico_179 + .select-styled:before, .select-custom.custom-sel-fliter .select-list li[rel="179"]:before {background-color: #795548;font-size: 12px !important;letter-spacing: -0.05em !important;letter-spacing: -0.05em !important;letter-spacing: -0.05em !important;letter-spacing: -0.05em !important;} .ico_grade.ico_no, .select-custom.custom-sel-fliter .select-hidden.ico_180 + .select-styled:before, .select-custom.custom-sel-fliter .select-list li[rel="180"]:before {background-color: #575757;font-size: 12px !important;letter-spacing: -0.05em !important;} .ico_grade.ico_gv {background-color: #9C27B0;font-size: 12px !important;letter-spacing: -0.05em !important;} .ico_grade.ico_blank {border: 1px dashed #ababb7 !important;color: #9191a3 !important;font-size: 11px !important;letter-spacing: -0.04em !important;} .ico_grade.ico_bundle { font-size: 0 !important; background: url(/kor/img/cont/schedule/bdg_bundle.svg) no-repeat calc(100% - 5px) center; background-size: 21px auto; background-color: #2b292d; } .ico_grade.ico_code {background-color: #fff; border:1px solid #eb1414!important; border-radius:50em; color:#eb1414 !important} @media (min-width: 992px) { .badge_grade {font-size:0.8rem;width:28px;height:28px;line-height:26px;} } /* ------------------------------------------------------------------------------------------------------------------------------------------------ END ) 공통 ------------------------------------------------------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------------------------------------------------------ START ) 공식상영작 > 전체 상영작 - Selection > Selection List (prog_all_list.asp) ------------------------------------------------------------------------------------------------------------------------------------------------ */ #wrap:has(#progAllwrap) {overflow:clip;} #progAllwrap {padding-bottom:10rem; font-size:10px; border-top:1px solid #ddd;} #progAllwrap .container-lg {position:relative;} #progAllwrap .mode_btn {position:absolute;right:1.5rem;top: -66px;transform: translateY(-100%);} #progAllwrap .mode_btn .btn_wrap {display:inline-flex; background:#f3f3f3; border-radius:50em;} #progAllwrap .mode_btn .btn_wrap:hover { background:#aaa; border-radius:50em; transition:all 0.5s;} #progAllwrap .mode_btn .btn_wrap a {display:block; padding:1.5ex 3ex; font-size:1.4em; transition:all 0.5s;} #progAllwrap .mode_btn .btn_wrap a.on { padding:1.5ex 3.5ex; background:#222; box-shadow:0px 0px 6px 0 rgb(0 0 0 / 33%); border-radius:50em; transition:all 0.5s;} #progAllwrap .mode_btn .btn_wrap a img {width:1.4em;filter: contrast(0.5);} #progAllwrap .mode_btn .btn_wrap a:hover img, #progAllwrap .mode_btn .btn_wrap a.on img {filter: contrast(1);} #progAllwrap .list_wrap .list_sec h3 {position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky; top:var(--hd-height); padding:1ex 0; margin-bottom:1ex; font-size:2.4em; background:rgba(255,255,255,0.95); z-index:2; } #progAllwrap .list_wrap .list_sec h3 strong {display:block; margin-bottom:0.5ex; font-weight:700; color:#000;} #progAllwrap .list_wrap .list_sec h3 small {display:block;font-weight:500; font-size:0.66em; color:#999; word-break:keep-all} #progAllwrap .list_wrap .list_sec h3.sticky_active {border-bottom:1px solid rgba(0,0,0,0.1);} #progAllwrap .list_wrap .list_sec h3.sticky_active small {display:none;} @media screen and (max-width:1240px) { #progAllwrap {font-size:9px;} } @media screen and (max-width:768px) { #progAllwrap {margin-top:3em;} #progAllwrap .mode_btn {top:inherit; left:0; right:0; padding:3ex 0; text-align:center; } } @media screen and (max-width:540px) { #progAllwrap {font-size:2vw;} #progAllwrap .mode_btn {padding:4ex 0;} } /*------------------------------------------------ 전체상영작 리스트형 ------------------------------------------------*/ #progAllList {padding-bottom:6em;} #progAllList .list_wrap .list_sec {padding:5em 0 0; } #progAllList .list_wrap .list_sec table {width:100%; font-size:1.6em; border-bottom:1px solid #ddd; } #progAllList .list_wrap .list_sec table thead th {padding:1ex 1em; text-align:left; font-size:0.9em; font-weight:500; color:#fff; background:#222; white-space:normal !important; } #progAllList .list_wrap .list_sec table tbody tr:nth-child(odd) {background:#f7f7f7;} #progAllList .list_wrap .list_sec table tbody th {width:48%; padding:1em 0.9em; text-align:left; color:#000; border-top:1px solid #ddd; white-space:normal !important; } #progAllList .list_wrap .list_sec table tbody td {width:26%;padding:1em 1em;font-size:0.9em;color:#777;border-top:1px solid #ddd;word-break:break-word;line-height: 1.1;} #progAllList .list_wrap .list_sec table tbody tr:hover, #progAllList .list_wrap .list_sec table tbody tr:focus {background:#ffebeb} #progAllList .list_wrap .list_sec table tbody th b {font-weight:600; text-decoration:underline; cursor:pointer;} #progAllList .list_wrap .list_sec table tbody th b:hover, #progAllList .list_wrap .list_sec table tbody th b:focus {color:var(--biff-red);} #progAllList .list_wrap .list_sec table tbody th .bdg {display:inline-flex; justify-content:center; align-items:center; width:1.55em; height:1.55em; margin-right:0.75ex; font-weight:500; font-size:0.8em; color:#fff; border-radius:50em; background:var(--biff-red); vertical-align:text-bottom;} #progAllList .list_wrap .list_sec table tbody th button {display: inline-flex;align-items: center;padding: 0 1.5ex 0 .5ex;/* aspect-ratio: 1 / 1; */background: #ffffff;border-radius:100em;border: 1px solid #eaeaea;vertical-align: bottom;transition:all 0s;} #progAllList .list_wrap .list_sec table tbody th button span {font-size: 0.9em;color: #111;display: block;line-height: 1;} #progAllList .list_wrap .list_sec table tbody th button svg {width:1.6em; fill: var(--biff-red);} #progAllList .list_wrap .list_sec table tbody th button:hover{ aspect-ratio:auto; border-color:transparent; background-color:var(--biff-red); transition:all 0.5s;} #progAllList .list_wrap .list_sec table tbody th button:hover svg {fill: #fff;} #progAllList .list_wrap .list_sec table tbody th button:hover span { color:#fff;} @media screen and (max-width:768px) { #progAllList .list_wrap .list_sec table tbody th button:hover{background:#111;} #progAllList .list_wrap .list_sec table tbody th button:hover span { color:#fff;} } @media screen and (max-width:540px) { #progAllList .list_wrap .list_sec table thead {display:none;} #progAllList .list_wrap .list_sec table tbody tr {position:relative;display:flex;flex-flow:column;padding:1em;border-top:1px solid #ddd;gap: 0.5ex;} #progAllList .list_wrap .list_sec table tbody tr:first-child {border-top:1.5px solid #000;} #progAllList .list_wrap .list_sec table tbody th {width:100%;padding: 0;border-top:none;} #progAllList .list_wrap .list_sec table tbody th button {position:absolute; right:1ex; bottom:1ex; } #progAllList .list_wrap .list_sec table tbody td {width: calc(100% - 7em);padding:0 0 0;border-top:none;} } /*------------------------------------------------ //전체상영작 리스트형 ------------------------------------------------*/ /*------------------------------------------------ 전체상영작 그리드형 ------------------------------------------------*/ #progAllGrid {} #progAllGrid .list_wrap .list_sec {padding:4em 0; border-bottom:1px solid #ededed;} #progAllGrid .list_wrap .list_sec ul {display:flex;flex-wrap:wrap;gap: 4em 1px;} #progAllGrid .list_wrap .list_sec ul li {position:relative;width: calc((100% - (1px * 3)) / 4);} #progAllGrid .list_wrap .list_sec ul li .li_inner {display:block; width:100%; word-break: break-all;} #progAllGrid .list_wrap .list_sec ul li .li_inner .thumb {position:relative; width:100%; height:auto; aspect-ratio:238 / 156; border-radius:0; background:#000; overflow:hidden;} #progAllGrid .list_wrap .list_sec ul li .li_inner .thumb img {width:100%; height:100%; object-fit:cover; opacity:0.8; transition:all 0.5s;} #progAllGrid .list_wrap .list_sec ul li .li_inner .thumb .bdg {position:absolute; top:0; left:0; display:block; padding:0.5ex 1em; font-weight:700; font-size:1.3em; color:#fff; border-radius:0; background:var(--biff-red); z-index:1;} #progAllGrid .list_wrap .list_sec ul li .li_inner .thumb .btn_trailer {position: absolute;bottom: 1.5ex;right: 1.5ex;display:flex;justify-content:center;align-items:center;width: auto;/* height: 2.5em; */padding: 0 1.5ex 0 .5ex;background-color: #ffffff26;backdrop-filter: blur(5px);border-radius: 50em;border: 1px solid rgba(255,255,255,0.1);/* border-left:1px solid rgba(255,255,255,0.1); */transition:all 0.5s;z-index: 1} #progAllGrid .list_wrap .list_sec ul li .li_inner .thumb .btn_trailer span {font-size: 0.9em;color:#fff;} #progAllGrid .list_wrap .list_sec ul li .li_inner .thumb .btn_trailer svg {width:1.6em; fill:#fff} #progAllGrid .list_wrap .list_sec ul li .li_inner .thumb .btn_trailer:hover {background-color: var(--biff-red);} #progAllGrid .list_wrap .list_sec ul li .li_inner .thumb .btn_trailer:hover svg {fill:#fff;} #progAllGrid .list_wrap .list_sec ul li .li_inner .thumb .btn_trailer:hover span {color:#fff;} #progAllGrid .list_wrap .list_sec ul li .li_inner .txt {padding:1em; font-size:1.3em; word-break:keep-all;} #progAllGrid .list_wrap .list_sec ul li .li_inner .txt h4 {font-weight:600; font-size:1.28em; line-height:1.2} #progAllGrid .list_wrap .list_sec ul li .li_inner .txt .producer {margin-top:0.5ex; font-weight:400; color:#666;} #progAllGrid .list_wrap .list_sec ul li .li_inner .txt .country {margin-top:1ex; color:#9E9485} #progAllGrid .list_wrap .list_sec ul li .li_inner:hover .thumb img {transform:scale(1.1); opacity:1; transition:all 0.5s;} @media screen and (max-width:1240px) { #progAllGrid .list_wrap .list_sec ul li {width:calc((100% - (1px * 2)) / 3)} } @media screen and (max-width:768px) { #progAllGrid .list_wrap .list_sec ul li {width:calc((100% - (1px * 1)) / 2)} #progAllGrid .list_wrap .list_sec ul li .li_inner .thumb .btn_trailer svg {width:2em} #progAllGrid .list_wrap .list_sec ul li .li_inner .thumb .btn_trailer span {font-size: 1.2em} } @media screen and (max-width:540px) { #progAllGrid .list_wrap .list_sec ul {display:flex; flex-wrap:wrap; gap:4.5em 1px;} #progAllGrid .list_wrap .list_sec ul li {width:calc((100% - (1px * 1)) / 2)} } /*------------------------------------------------ //전체상영작 그리드형 ------------------------------------------------*/ /* ------------------------------------------------------------------------------------------------------------------------------------------------ // END ) 공식상영작 > 전체 상영작 - Selection > Selection List (prog_all_list.asp) ------------------------------------------------------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------------------------------------------------------ START ) 공식상영작 > 섹션별 목록 (prog_list.asp) ------------------------------------------------------------------------------------------------------------------------------------------------ */ body:has(.pgl) .d3tab_basic {margin-bottom:40px;} .pgl {position:relative;padding-top:0px;margin-left:-15px;margin-right:-15px;} .pgl:before, .pgl:after {clear:both;display:block;content:'';} .pgl .pg_li {position:relative;float:left;padding-left: 0;padding-right: 1px;margin:0 0 40px 0} .pgl_info {margin: 40px 0 50px;text-align: center;padding: 40px 10px;font-size: 17px;line-height: 1.7;color: #d5d5d5;background: linear-gradient(161deg, #292929 0%, #10051a 100%);word-break: keep-all;border: 0.5px solid #000000;} .pgl_info h2 {margin-bottom: 1ex;font-size: 26px;line-height: 1.4;font-weight: 600;color: #ffffff;} .pgl_info h2 br {display:none;} .pgl_info small {display:block;margin-top: 2ex;font-size: 1em;font-weight: 300;color: #d5d5d5;} .pgl .pg_li .btn_play_trailer {position: absolute; top: 5px; right: 6px; display:flex; justify-content:center; align-items:center; width: auto; height: 40px; aspect-ratio:1 / 1; background-color: #ffffff1a; backdrop-filter: blur(5px); border-radius: 50em ; border-bottom:1px solid rgba(255,255,255,0.1); border-left:1px solid rgba(255,255,255,0.1);transition:all 0.5s; z-index: 1} .pgl .pg_li .btn_play_trailer span {font-size:0;color:#fff;} .pgl .pg_li .btn_play_trailer img {width:2em;} .pgl .pg_li .btn_play_trailer:hover {aspect-ratio:auto; padding-right:1em; background-color: rgba(0,0,0,0.5); border-color:transparent;} .pgl .pg_li .btn_play_trailer:hover span { font-size:1em;} .pgl .pg_li .film_thumb {position:relative;display: flex; flex-direction: column; justify-content: space-around;width:100%;height:auto; aspect-ratio:370 / 240; overflow:hidden;text-align:center;background:#000; border-radius:0; } .pgl .pg_li .film_thumb img {width:100%; height:100%; object-fit:cover; transform-origin:center center;transform:scale(1);opacity:.9;-webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;-o-transition: all 0.2s ease-out;transition: all 0.2s ease-out;} .pgl .pg_li:hover .film_thumb img {opacity:1;transform:scale(1.1);} .pgl .textbox { margin-bottom: 30px; padding: 10px 40px 10px 40px; background: #efefef; } .pgl .textbox1 { position:relative; padding: 20px 40px; background: #efefef; margin: 0 16px 30px 16px; } .pgl .textbox p { font-size:17px; position: relative; color: #666; letter-spacing: -0.5px; font-weight:;} .pgl .textbox1 p { margin-left: 150px; font-size:17px; position: relative; color: #666; letter-spacing: -0.5px; font-weight:;} .pgl .textbox1 .btnbox { position: absolute; top: 10.25px; right: 190px; } .pgl .textbox1 .btnbox .btnbox-btn { border-radius: 10px; padding: 11px; color: #000; background: #fff; } .pgl .textbox1 .btnbox .btnbox-btn:hover { box-shadow: 0 0 1px rgb(0,0,0,0.5); } .pgl .pg_li .prem { position:absolute; top:5px; left:5px; display:inline-block;z-index:10;background:var(--biff-red); vertical-align:middle; border-radius:0;padding:6px 10px;font-size:12px;line-height:1.5;color:#fff;} .pgl .pg_li .film_thumb .jiseok {position:absolute;bottom:8px;right:6px;display:inline-block;z-index:10;border-radius:0;-webkit-border-radius:0;padding:3px 8px;font-size:11px;line-height:1.5;font-family:dotum, sans-serif;color:#fff;background:url(/kor/img/cmm/ico_award_jiseok.png) no-repeat 0 0 rgba(0,0,0,.1);padding-left:26px;letter-spacing:-1px;background-size:22px} .pgl .pg_li .prem {} .pgl .pg_li .sectionName {background:#000;font-size:12px;color:#fff;display:none;padding:5px 13px;border-radius:0;margin: 24px 20px 0 20px;} .stillcut .txtbox .txtbox_inner .sectionName {display:inline-block;font-size:13px;color:#fff;padding:5px 14px;background:#d72f2f;color:#fff;border-radius:0;-webkit-border-radius:0;} .pgv_schedule .pgv_film_info .sectionName {display:inline-block;font-size:15px;color:#fff;padding:8px 15px;background:#d72f2f;color:#fff;border-radius:0;-webkit-border-radius:0;} .pgl .pg_li .txtbox {height:160px;margin: 18px;} .pgl .pg_li .txtbox:after {clear:both;display:block;content:'';} .pgl .pg_li .txtbox .film_tit {color:#000; display:block;font-size:20px;font-weight:500;letter-spacing:-1px;word-break:keep-all} .pgl .pg_li .txtbox .dir {font-size:15px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-1px;color:#888;margin-top:4px} .pgl .pg_li .txtbox .film_info {margin:6px 0 14px} .pgl .pg_li .txtbox .film_info:before, .pgl .pg_li .txtbox .film_info:after {clear:both;display:block;content:'';} .pgl .pg_li .txtbox .film_info li {position:relative;display:inline;padding-left:10px;margin-left:7px;font-size:13px;color:#888;word-break:break-word} .pgl .pg_li .txtbox .film_info li:after {content:'';display:inline-block;width:1px;height:10px;position:absolute;top:3px;left:0;background:#aaa;} .pgl .pg_li .txtbox .film_info li:first-child {padding-left:0; margin-left:0;} .pgl .pg_li .txtbox .film_info li:first-child:after {display:none;} .pgl .pg_li .txtbox .film_award_list {display:block;} .pgl .pg_li .txtbox .film_award_list:before, .pgl .pg_li .txtbox .film_award_list:after {clear:both;display:block;content:'';} .pgl .pg_li .txtbox .film_award_list li {float:left;display:inline-block;font-size:12px;line-height:1.5;background:#f3edde;color:#ba9b52;padding:4px 8px;letter-spacing:-0.5px;margin-right:4px;font-weight:500; border-radius: 0;;} /* 3depth가 있는 리스트 */ .page:has(.d3tab_basic) .pgl .pg_li .txtbox {margin-top:8px;} .page:has(.d3tab_basic) .pgl .pg_li .sectionName {display:inline-block;} .page:has(.d3tab_basic) .pgl .pg_li .sectionName span {display:none;} /*검색결과리스트*/ .con_result .pgl .pg_li .sectionName {display:inline-block;} @media (max-width: 1440px) { .pgl .pg_li {width:33.333333%} } @media (max-width: 960px) { .pgl .pg_li {width:50%} } @media (max-width: 768px) { .pgl_info {font-size:14.5px} .pgl_info h2 {font-size:20px;} .pgl_info h2 br {display:block;} .pgl_info p br {display:none;} .pgl_info small {} .pgl_info small br {display:none;} .pgl .pg_li .btn_play_trailer:hover, .pgl .pg_li .btn_play_trailer:focus {padding-right:0; aspect-ratio:1 / 1;} .pgl .pg_li .btn_play_trailer:hover span, .pgl .pg_li .btn_play_trailer:focus span {display:none; } .pgl .textbox1 { padding: 20px; } .pgl .textbox1 .btnbox { position: relative; top: 9px; left: 0;} .pgl .textbox1 p { margin:0; } .pgl .pg_li .sectionName {MARGIN:14px 10px 0 10px} .pgl .pg_li .txtbox {height:auto; margin:8px 10px 8px 10px} .pgl {margin-left:-10px;margin-right:-10px;} .pgl .pg_li .film_thumb { height:auto;} } @media screen and (max-width:430px) { .pgl {margin-left:-8px;margin-right:-8px;padding-top:0} .pgl .pg_li {width:100%} .pgl .pg_li .sectionName {margin-top:12px !important;} .pgl .pg_li .btn_play_trailer {width:30px; height:30px; } .pgl .pg_li .btn_play_trailer img {width:1.6em;} .pgl .pg_li .txtbox .film_tit {font-size:16px;line-height:1.4;;} .pgl .pg_li .txtbox .dir {font-size:12px;} .pgl .pg_li .txtbox .film_info {display:none} .pgl .pg_li .txtbox .film_award_list {margin-top:8px} .pgl .pg_li .txtbox .film_award_list li {font-size:10px;padding:2px 4px 1px} } /*------------------------------------------------ 상영작 리스트 3차탭 ------------------------------------------------*/ .tab_list2 {margin:0 auto 35px auto;border-bottom:0px solid #e0e0e0; text-align:center;} .tab_list2:before, .tab_list2:after {content:'';display:block;clear:both;} .tab_list2 li {position:relative;display:inline-block;padding:2px 28px ;letter-spacing:-1px;margin:0 5px; background:#dfdfdf; border-radius:50px;-webkit-border-radius:50px; } .tab_list2 li:first-child {margin-left:0} .tab_list2 li a {position:relative;display:inline-block;font-size:17px;color:#777;padding:12px 1px 6px;font-weight:400;margin-bottom:6px} .tab_list2 li a:hover {color:#fff !important;} .tab_list2 li:hover {color:#fff !important;background:#bf202c; -webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;-o-transition: all 0.2s ease-out;transition: all 0.2s ease-out;} .tab_list2 li.on {letter-spacing:-1px;margin:0 8px;background:#bf202c; color:#fff;border-radius:50px;-webkit-border-radius:50px; } .tab_list2 li.on a { color:#fff;} .tab_list2 li a:hover { color:#fff;} @media only all and (max-width:430px) { .tab_list2 {margin:0 auto 20px auto; } .tab_list2 li {padding:2px 8px ;margin:3px 3px; } .tab_list2 li a {font-size:15px; padding:6px 2px 3px 2px;font-weight:400;margin-bottom:6px} .tab_list2 li.on {margin:0 3px;background:#bf202c; } } /*------------------------------------------------ //상영작 리스트 3차탭 ------------------------------------------------*/ /* ------------------------------------------------------------------------------------------------------------------------------------------------ END ) 공식상영작 > 섹션별목록 (prog_list.asp) ------------------------------------------------------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------------------------------------------------------ START ) 공식상영작 > 상영작 뷰 (prog_view.asp) ------------------------------------------------------------------------------------------------------------------------------------------------ */ body:has(#pgv) {background-color:#000;} #pgv .film .filmdetail { margin-top:5rem;} #pgv .film .film_sec {padding-bottom:10rem; z-index:1;} @media (min-width: 992px) { #pgv .film .filmdetail {padding-bottom:2rem;} } @media (max-width:768px) { #pgv .film .film_sec {padding-bottom:5rem;} #pgv .film .desc:not(.dir_name) {font-size:1.5rem;} } @media only all and (max-width:540px) { } /*------------------------------------------------ 상영작뷰 헤더&배너지연노출 ------------------------------------------------*/ @media screen and (min-width: 767px) { body.pgv_page #hd { position: absolute; background-color: transparent; } body.pgv_page:not(.menu_opened) #hd:not(.fixed-top) { opacity: 0; transform: translateY(-1rem);animation: FadeInDown 1s ease-in-out 1 forwards; animation-delay: 1s; transition: unset; } body.pgv_page #hd.menu {/*position:static; */animation:none; opacity:1; transform:inherit; } body.pgv_page #pgv .btn_list_wrap .btn_3list { opacity: 0; transform: translateY(1rem); animation: FadeInUp 1.1s ease-in-out 1 forwards; animation-delay: 1s; transition: unset; } body.pgv_page #pgv .film .pg_section { opacity: 0; transform: translateY(1rem); animation: FadeInUp 1s ease-in-out 1 forwards; animation-delay: 0.5s; transition: unset; } body.pgv_page #pgv .film .tit_h1 { opacity: 0; transform: translateY(1rem); animation: FadeInUp 1s ease-in-out 1 forwards; animation-delay: 0.65s; transition: unset; } body.pgv_page #pgv .film .film_tit { opacity: 0; transform: translateY(1rem); animation: FadeInUp 1s ease-in-out 1 forwards; animation-delay: 0.8s; transition: unset; } body.pgv_page #pgv .film .film_sec { opacity: 0; transform: translateY(1rem); animation: FadeInUp 1s ease-in-out 1 forwards; animation-delay: 0.95s; transition: unset; } } @media screen and (max-width: 768px) { body:has(#pgv) #hd:not(.fixed-top):not(.menu).pgv_page { opacity: 1; transform: translateY(0); animation: none; } } @keyframes FadeToLeft { from { opacity: 0; transform: translateX(1.5rem); } to { opacity: 1; transform: translateX(0); } } @keyframes FadeInDown { from { opacity: 0; transform: translateY(-1rem); } to { opacity: 1; transform: translateY(0); } } @keyframes FadeInUp { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } } /*------------------------------------------------ //상영작뷰 헤더&배너지연노출 ------------------------------------------------*/ /*------------------------------------------------ 상영작뷰 상단(배너,제목등) ------------------------------------------------*/ #pgv .pgv_tit {font-size:30px;font-weight:900;color:#111;margin-bottom:40px} #pgv .filmtop {position:relative;} #pgv .filmtop .thumb {position:relative;height:680px;overflow:hidden;background:#000} #pgv .filmtop .thumb .still_bg {display:block;width:100%;height:100%;background-attachment:fixed;background-size:cover;background-repeat:no-repeat; background-position:50% 50%;opacity:.6} #pgv .filmtop .thumb .still_bg_none {display:block;width:100%;height:100%;background-size:cover;background-repeat:no-repeat; background-position:50% 50%;opacity:.6} #pgv .filmtop .tit_wrap {position:absolute;left:0;right:0;bottom:80px;margin:auto auto;text-align:center;color:#fff;z-index:10} #pgv .filmtop .tit_wrap .premiere {display:inline-block;font-size:13px;color:#fff;padding:4px 10px;background:#d72f2f;color:#fff;border-radius:50px;-webkit-border-radius:50px;margin-bottom:15px} #pgv .filmtop .tit_wrap .film_tit {font-size:48px;line-height:1;font-weight:bold;letter-spacing:-1.5px;} #pgv .filmtop .tit_wrap .film_tit_en {font-size:26px;opacity:.6;margin-top:15px;} #pgv .filmtop .tit_wrap .dir {font-size:18px;line-height:1.5;opacity:.8;margin-top:20px;display:none} #pgv .filmtop .btn_play_trailer {display:inline-block;width:40px;height:40px;background:rgba(0, 0, 0, 0.15) url(/kor/img/layout/btn_play_s.png) no-repeat 50%; position:absolute;top:30px; right:30px; z-index:30; border-radius:50%; } #pgv .filmtop .btn_play_trailer2 {display:inline-block;width:13rem;height:13rem;background:rgba(255,255,255, 0.05) no-repeat center; background-image:url('data:image/svg+xml;utf8,') ; border:1px solid rgba(255,255,255,0.1); background-size: 45%; background-position: 50% center;position:absolute;top: calc(50% - 3.25rem); right: calc(50% - 6.5rem);; z-index:1; border-radius:50em; box-shadow:0 0 20px rgb(0 0 0 / 20%); backdrop-filter: blur(2px); mix-blend-mode: hard-light;transition:all 0.5s;} #pgv .filmtop .btn_play_trailer2:hover { transform:scale(1.05); } #pgv .pgv_film_info {padding-bottom:40px} #pgv .pgv_film_info:before, #pgv .pgv_film_info:after {clear:both;display:block;content:'';} #pgv .pgv_film_info ul li {position:relative;display:inline-block;font-size:16px;font-weight:900;padding-right:25px;margin-left:20px;} #pgv .pgv_film_info ul li:after {content:'';display:inline-block;width:1px;height:13px;background:#888;position:absolute;top:3px;right:0; /*transform: rotate( 135deg );*/} #pgv .pgv_film_info ul li:first-child {margin-left:0} #pgv .pgv_film_info ul li:last-child:after {content:none}/* 필름 */ #pgv .btn_list_wrap {position:absolute; left:0; right:0; top:16rem;} #pgv .btn_list_wrap .breadcrumb { top:0; left:0; z-index:99; padding:1.8rem 4rem; border-radius:5rem; backdrop-filter: blur(4px);position:relative; display:inline-flex; align-items:center; gap:1em; font-size:1.4rem; color:#ccc; background:rgb(0 0 0 / 59%);} #pgv .btn_list_wrap .breadcrumb a {color:rgba(255,255,255,0.5);} #pgv .btn_list_wrap .breadcrumb a:not(.bc_all) {text-decoration:underline;} #pgv .btn_list_wrap .breadcrumb a:hover {color:var(--biff-red);} #pgv .btn_list_wrap .breadcrumb a.bc_all {font-size:1.1em; line-height:1; color:#D6D6D6; } #pgv .btn_list_wrap .breadcrumb a.bc_all:before {content:""; display:inline-block; width:1em; height:auto; aspect-ratio:2 / 1.5; background: url('/kor/img/cmm/ico_3list.png?1') no-repeat; vertical-align: baseline; background-size: contain;} #pgv .btn_list_wrap .breadcrumb i {display:block; width:1ex; height:1ex; border-top:1px solid #fff; border-right:1px solid #fff; transform:rotate(45deg); opacity:0.5} #pgv .btn_list_wrap .breadcrumb b {color:var(--biff-red);} #pgv .film .film-body {padding:0;color:#fff;background-color: var(--color-background);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;transition: background-color 1s cubic-bezier(0.12, 0, 0, 1);animation: FadeInScale 1s ease-in 0.1s forwards;/*margin-top: -16rem;*/background:#000;padding-bottom:4rem} @keyframes FadeInScale { from { opacity:0; transform:scale(1.01); } to { opacity:1; transform:scale(1.); } } #pgv .film .filmtop {position:relative;background-color:var(--color-background);height: calc(var(--vh, 1vh) * 100);/* padding-bottom:54%; */overflow:hidden;} #pgv .film .filmtop .filmtop_visual {position: relative;top: 0;left:0;width:100%;height: 100%;background-position:center center;background-repeat: no-repeat;background-size: cover;background-attachment:fixed;} #pgv .film .filmtop .filmtop_visual:has(.img-v) {background-position:center top;} #pgv .film .filmtop .filmtop_visual:has(.img-h) {background-position:center center;} #pgv .film .filmtop .filmtop_visual::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.30) 17%, rgba(0, 0, 0, 0.24) 72%, rgba(0, 0, 0, 0.51) 87%, #000 100%); pointer-events: none; /* 클릭 방지 */} #pgv .film .filmtop #color-img {display:none;} #pgv .blackcover { display:none;} #pgv .film .tit_h1 { font-size:7.2rem; color:#fff; margin-bottom:1rem; line-height:1.2; text-shadow: 2px 2px 2px #33333350;} #pgv .film .tit_h2, #pgv .film .tit_h3, #pgv .film .desc {color:#d6d6d6;opacity: 0.99; } #pgv .film .h2 {margin-bottom:1.125rem; display:block; text-wrap:balance; opacity: 0.99;} #pgv .film .h3 {position:relative; margin-bottom:1ex; display:block;opacity: 0.99; font-size:28px; font-weight:700} #pgv .film .h3 > a {position:absolute; top:50%; right:0; font-size:1.6rem; margin-top:-12px; color:rgba(255, 255, 255, 0.6); padding-right:18px; transition:0.3s} #pgv .film .h3 > a:hover {color:rgba(255, 255, 255, 0.8);} #pgv .film .h3 > a:before {content:''; position:absolute; bottom:0; left:0; display:block; height:1px; width:0; background:#fff;transition:0.2s} #pgv .film .h3 > a:hover:before {width:calc(100% - 14px);} #pgv .film .h3 > a:after{content:''; position:absolute; top:50%; right:0; display:block;width:14px; height:16px; margin-top:-8px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='rgba(255,255,255,0.6)'%3E%3Cpath d='M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z'%3E%3C/path%3E%3C/svg%3E"); background-repeat:no-repeat;} #pgv .film .desc {/* opacity:0.7; */ font-size:1.6rem; line-height:1.67; color:#a3a3a3; } #pgv .film .film_tit {font-size: 1.2rem;font-weight:500;opacity: 1; margin-top:3rem; background-color:transparent;color:#fff; text-shadow: 0px 1px 5px #111111b3;letter-spacing: 0.01em;} #pgv .film .film_tit_en {margin-top:1ex; font-size: 1.4rem;font-weight:bold;opacity: 0.7;display:block; } #pgv .film .film_tit .keywords { background: rgba(255, 255, 255, 0.3); display: inline-block; padding: 1rem 1.6rem; border-radius: 5rem; margin-right:0.5rem; } #pgv .film .film_tit .keywords.prize {color:#ffe8b3; background-color: rgba(215, 195, 145, 0.3);} #pgv .film .film_info_title {position:absolute;bottom:3rem; width:1600px;} #pgv .film .film_info {position:relative;} #pgv .film .film_info ul {position:relative;margin-left:-1.3rem;margin-right:-1.2rem;margin-top:1em; padding: 0 15px; margin-top:3rem;} #pgv .film .film_info ul:after { content: ''; clear: both; display: block; } #pgv .film .film_info ul li {color:#999; position:relative;padding:0 1.7rem 0 1.7rem; font-size:1.8rem;display: inline-block; line-height:1.7;word-break: break-word;} #pgv .film .film_info ul li span.screen_outx {display:none; font-size:1.6rem; color:#888; padding-right:1rem;} #pgv .film .film_info ul li:first-child {padding-left:0} #pgv .film .film_info ul li:not(:last-child):after {content:'';display:inline-block;width:1px;height:15px;background:rgba(255,255,255,0.2);position:absolute;top:8px;right:0;opacity: .6} #pgv .film .img_copy {position:absolute; right:0; bottom:6rem; opacity:0.6; padding:10px 0; text-align:right;} #pgv .film .img_copy em {position:absolute; right:0; bottom:8px; opacity:1;} #pgv .film .img_copy em:after {content:'©'; transition:0.3s} #pgv .film .img_copy > span {opacity:0; visibility:hidden; text-align:right; transition:0.3s;} #pgv .film .img_copy:hover > span, #pgv .film .img_copy:active > span, #pgv .film .img_copy:focus > span {display:inline-block; opacity:1; visibility:visible;} #pgv .film .img_copy:hover em:after {opacity:0;} #pgv .film .film_info_title .pg_section {opacity: 0.99; display:inline-block;font-size:1.2rem;font-weight:500;padding:3px 10px 4px;border-radius:50px;-webkit-border-radius:50px;border:0px solid #fff;margin-bottom:1.5rem; background:#C20B0B} @media (min-width: 992px) { .film .film_tit {font-size: 1.4rem; } .film .film_tit_en {font-size: 2.0rem; display:inline-block;} .film .film_info ul {display:flex;align-items:center;justify-content: flex-start; } } @media (max-width:1650px) { #pgv .film .film_info_title {width:calc(100% - 4rem);} } @media (max-width:1200px) { #pgv .film .img_copy {bottom:100%;} #pgv .filmtop .tit_h1 {font-size:5.8rem;} } @media screen and (max-width:1024px) { #pgv .btn_list_wrap {top:11rem;} #pgv .film .film-body {margin-top:-8.6rem} #pgv .film .filmtop {height:calc(var(--vh, 1vh) * 80)} #pgv .film .filmtop .filmtop_visual {background-attachment:inherit;} } @media (max-width:992px) { #pgv .film .pg_section {display:inline-block;font-size:1.2rem;font-weight:500;padding:0.2rem 0.5rem;border-radius:50px;-webkit-border-radius:50px;margin-bottom:0.5rem} #pgv .btn-play { background:#fff;color:#000; padding:5px 10px; border-radius:15px; margin-top:0.75rem; font-size: 0.75rem } } @media (max-width:768px){ #pgv .btn_list_wrap {display:none; top:11rem;} #pgv .btn_list_wrap .btn_3list {padding: 1.5rem 2rem; font-size:1.5rem; background-color:#222222b8} #pgv .btn_list_wrap .btn_3list:before {padding-right:1rem;} #pgv .filmtop .btn_play_trailer2 {width:7rem; height:7rem;top: calc(50% - 5rem);right: calc(50% - 3.5rem);} #pgv .film .film-body {margin-top:0;} #pgv .film .filmtop { height: auto; padding-bottom: 24rem; box-sizing: content-box;} #pgv .film .filmtop .filmtop_visual {height:auto; padding-bottom: 1px; background-image: none !important;} #pgv .film .filmtop #color-img {display:block;} #pgv .film .img_copy > span {font-size:12px; display:block; text-align:right;} #pgv .film .tit_h1 { font-size: 3rem; } #pgv .film .h3 {font-size:2rem;} #pgv .film .film_info ul li span.screen_outx { display:none; } #pgv .film .film_info ul {margin-top:1rem} #pgv .film .film_info ul li { font-size: 1.3rem; padding: 0 0.5rem; float:left} #pgv .film .film_info ul li:not(:last-child):after {content:'';display:inline-block;width:1px;height:10px;background:rgba(0,0,0,0.3);position:absolute;top:7px;right:0;opacity: .6; } #pgv .film .film_tit { margin-top:1rem; } #pgv .film .film_tit .keywords { display: inline-block; margin-right:0; margin-top: 5px; } } @media only all and (max-width:430px) { #pgv .film .h3 {font-size:2rem;} #pgv .pgv_tit {font-size:20px;margin-bottom:15px} #pgv .filmtop .thumb {height:280px} #pgv .filmtop .thumb .still_bg {background-attachment:inherit} #pgv .btn_play_trailer {background-size:28px;width:28px;height:30px;top:-60px} #pgv .filmtop .tit_wrap {bottom:30px} #pgv .filmtop .tit_wrap .film_tit {font-size:24px} #pgv .filmtop .tit_wrap .dir {font-size:14px;margin-top:10px;font-weight:500} #pgv .filmtop .tit_wrap .premiere {font-size:10px;padding:4px 5px;margin-bottom:10px} #pgv .filmtop .tit_wrap .film_tit_en {font-size:15px;opacity:.9} #pgv .pgv_film_info {padding-bottom:20px} #pgv .pgv_film_info ul li {font-size:13px;padding-right:18px;margin-left:10px;margin-bottom:10px} #pgv .pgv_film_info ul li:after {top:0px} #pgv .credit {margin-top:30px} #pgv .credit_list li strong {width:30%;font-size:12px} #pgv .credit_list li span {width:70%;font-size:14px;font-weight:400;letter-spacing:-0.5px} } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #pgv .film .filmtop .blackcover { display:block; position: absolute; background: linear-gradient(to top, black, transparent); width: 100%; height: 0; padding-bottom:61%;} #pgv .film .filmdetail .credits ul {margin-top:-0.4rem;margin-bottom:-0.4rem;} #pgv .film .filmdetail .credits ul li {padding-top:0.4rem;padding-bottom:0.4rem;} #pgv .film .filmdetail .credits ul li span {display:inline-block;padding-right:0.6rem;color:var(--txt-muted);font-weight: 300;} #pgv .film .filmtop .filmtop_visual {background-size: cover; opacity: 1 !important; transform: scale(1);} } /*------------------------------------------------ //상영작뷰 상단(배너,제목등) ------------------------------------------------*/ #pgv .filmdetail_left {padding-right:10rem;} @media (max-width: 992px) { #pgv .filmdetail_left {padding-right:0;} } /*------------------------------------------------ 상영작뷰 프로그램노트 ------------------------------------------------*/ #pgv .film .filmdetail .film_synopsis .desc { font-size:1.7rem;} @media (max-width: 768px) { #pgv .film .filmdetail .film_synopsis .desc { font-size: 1.5rem; } } /*------------------------------------------------ //상영작뷰 프로그램노트 ------------------------------------------------*/ /*------------------------------------------------ 상영작뷰 시간표 ------------------------------------------------*/ #pgv .pgv_schedule {position:relative; } #pgv .pgv_schedule .pgv_sch_hd {display:none} #pgv .pgv_schedule .pgv_sch_hd ul li {display:inline-block;} #pgv .pgv_schedule .pgv_sch_list_wrap { display:flex; flex-flow:column; gap:.5rem; } #pgv .pgv_schedule .pgv_sch_list {display:flex;background: #232223; border:0.5px solid rgba(255,255,255,0.0); transition:all 0.3s;} #pgv .pgv_schedule .pgv_sch_list:has(a:hover) {border:0.5px solid rgba(255,255,255,0.15)} #pgv .pgv_schedule .pgv_sch_li { position: relative; display: flex ; padding-right:2rem; background: #232223; align-items: center; justify-content: space-between; border: 1px rgba(255, 255, 255, 0); flex-grow: 1; } #pgv .pgv_schedule .pgv_sch_li .left { display:flex; align-items:center; gap:1.5rem; width:100%;} #pgv .pgv_schedule .pgv_sch_li .left span {font-size:1.6rem;font-weight:400;color:#ccc; } #pgv .pgv_schedule .pgv_sch_li .left span.code {width: 4em; padding: 1.7rem 0; font-weight:600; text-align: center; line-height:1;background-color:#333133;} #pgv .pgv_schedule .pgv_sch_li .left span.theater {position:relative; } #pgv .pgv_schedule .pgv_sch_li .left span.date, #pgv .pgv_schedule .pgv_sch_li .left span.time {position:relative; display:flex; align-items:center;} #pgv .pgv_schedule .pgv_sch_li .left span.date:after, #pgv .pgv_schedule .pgv_sch_li .left span.time:after {content:""; display:block; width:1px; height:0.8em; margin-left: 1.5rem; background-color:rgba(255,255,255,0.2)} #pgv .pgv_schedule .pgv_sch_li .right .sch_grade {display:flex; gap:0; flex-shrink:0;} #pgv .pgv_schedule .pgv_sch_li .right .ico_grade {margin-right:0;} #pgv .pgv_schedule .pgv_sch_list .ticket_go_btn a { color: #fff; text-align: center; font-size: 1.7rem; font-weight: 400; line-height: normal; letter-spacing: 0rem; padding: 0rem 3rem; display: flex ; height: 100%; justify-content: center; align-items: center; gap:1.3ex; background-color: #333133;} #pgv .pgv_schedule .pgv_sch_list .ticket_go_btn a svg {width:1em;} #pgv .pgv_schedule .pgv_sch_list .ticket_go_btn a:hover { background: var(--biff-red); color:#fff; box-shadow:none; } #pgv .pgv_sch_li .pack {opacity:0;visibility:hidden;position:absolute; right:0; top: calc(100%);display: flex;flex-flow: column;justify-content: center;min-width:20rem;min-height:100%; width: max-content; height:fit-content;padding:1rem; background-color:rgba(0,0,0,1);border-radius:1ex;border: 1px solid rgba(255, 255, 255, 0.2);transform:translateX(0);z-index:3;overflow:hidden; } #pgv .pgv_schedule .pgv_sch_li .left .pack .pack_list::-webkit-scrollbar { width:5px; height:5px;} #pgv .pgv_schedule .pgv_sch_li .left .pack .pack_list::-webkit-scrollbar-track { background: rgba(255,255,255, 0); border-radius: 4px; } #pgv .pgv_schedule .pgv_sch_li .left .pack .pack_list::-webkit-scrollbar-thumb { background: rgba(255,255,255, 0.3); border-radius: 4px; } #pgv .pgv_schedule .pgv_sch_li .left .pack .pack_list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255, 0.3); } #pgv .pgv_schedule .pgv_sch_li .left .pack .pack_list li:not(:last-child) {border-bottom: 1px solid rgba(255, 255, 255, 0.1);} #pgv .pgv_schedule .pgv_sch_li .left .pack .pack_list a {display:block; padding:1ex;} #pgv .pgv_schedule .pgv_sch_li .left .film_tit .pack .film_tit_kor {display:block; height:auto; margin:0; color:#fff; font-size:15px;font-weight:500;overflow:visible; white-space:normal; line-height:1.3;text-decoration:underline} #pgv .pgv_schedule .pgv_sch_li .left .film_tit_eng {display:block;font-size:13px;color:#888;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:90%; white-space:nowrap; text-overflow:ellipsis;} #pgv .pgv_schedule .pgv_sch_li .left .pack .film_tit_kor i.xi-angle-right {margin-left:0.5ex; font-size:0.8em; color:#ff9197} #pgv .pgv_schedule .pgv_sch_li .left .ico_bundle {display: inline-block;width: 2.2rem;height: 2.2rem;background: #e5e5e5 url(/kor/img/cont/schedule/ico_bundle.svg) no-repeat center;background-size: 80%;border-radius: 3px;border: 1px solid rgba(0, 0, 0, 0.2);vertical-align: sub;filter: invert(1);box-shadow: 0 0 5px 0 rgb(0 0 0 / 28%);} #pgv .pgv_schedule .pgv_sch_li .left .pack .pack_list a:hover .film_tit_kor {color:#ffacb0} #pgv .pgv_schedule .pgv_sch_li .left .pack .pack_list a:hover .film_tit_eng {color:#fff} #pgv .pgv_schedule .premiere { font-size:15px; background:#333; color:#fff; display:inline-block; padding:8px 15px; border-radius:25px; margin-bottom:20px} @media (min-width: 769px) { #pgv .pgv_schedule .pgv_sch_li .left {border-left:0} #pgv .pgv_schedule .pgv_sch_li .left .theater:hover .pack , #pgv .pgv_schedule .pgv_sch_li .left .theater:focus .pack {opacity:1; visibility:visible; transition:all 0.5s;} } @media (max-width:1440px) { #pgv .pgv_schedule .pgv_sch_list_wrap {flex-flow:row; flex-wrap: wrap; gap:1rem; } #pgv .pgv_schedule .pgv_sch_list {flex-direction:column; width:calc((100% - 2rem) / 3); background-color:#232223; border:0.5px solid rgba(255,255,255,0.00)} #pgv .pgv_schedule .pgv_sch_li { padding: 1.5rem 1.5rem 2rem; flex-direction: column; align-items: flex-start; gap: 3rem;} #pgv .pgv_schedule .pgv_sch_li .left {flex-wrap:wrap; gap:.5ex 1rem; padding-top:3rem;} #pgv .pgv_schedule .pgv_sch_li .left span {font-size:1.4rem;} #pgv .pgv_schedule .pgv_sch_li .left span.code {position:absolute; top:1.5rem; left:1.5rem; width:3.5em; padding:0.5ex 0; background-color:#121112;} #pgv .pgv_schedule .pgv_sch_li .left span.theater {width:100%;} #pgv .pgv_schedule .pgv_sch_li .left span.time:after {display:none;} #pgv .pgv_schedule .pgv_sch_list .ticket_go_btn a {padding:1rem 1.5rem; font-size:1.6rem;} #pgv .pgv_schedule .pgv_sch_li .pack {left:0;min-width: 50%;} } @media (max-width:1200px) { #pgv .pgv_schedule {padding:0 0 8rem 0;} #pgv .pgv_schedule .pgv_sch_li {padding:1rem 1rem 1.5rem; } #pgv .pgv_schedule .pgv_sch_li .left span.code {top:1rem; left:1rem;} #pgv .pgv_schedule .pgv_sch_list .ticket_go_btn a {width: auto;padding: 1.5ex 1em;font-size: 1.6rem;border: none;color: #fff;box-shadow: none;} #pgv .pgv_schedule .pgv_sch_list .ticket_go_btn a svg {width:0.8em;} } @media (max-width:768px) { #pgv .pgv_schedule .pgv_sch_list .ticket_go_btn a {font-size:1.5rem;} #pgv .pgv_schedule .pgv_sch_li .left .pack.show { opacity: 1; visibility: visible; transition: all 0.5s;} } @media only all and (max-width:540px) { #pgv .pgv_schedule .pgv_sch_list_wrap {gap:1rem;} #pgv .pgv_schedule .pgv_sch_list {width:calc((100% - 1rem) / 2);} #pgv .pgv_schedule .pgv_sch_li .left span.date:after, #pgv .pgv_schedule .pgv_sch_li .left span.time:after {margin-left:1rem;} #pgv .pgv_schedule .pgv_sch_list .ticket_go_btn a {padding:1.5ex 1em;} } @media only all and (max-width:430px) { #pgv .pgv_schedule {padding:0 0 0} #pgv .pgv_schedule .pgv_sch_li ul li {font-size:13px;padding:0 8px} } /*------------------------------------------------ //상영작뷰 시간표 ------------------------------------------------*/ /*------------------------------------------------ 상영작뷰 감독정보 ------------------------------------------------*/ #pgv .film_director .list_dir + .list_dir {margin-top:20px;} #pgv .film_director .list_dir .dir_item {display:flex; ;} #pgv .film_director .list_dir .dir_item .dir_thumb { position:relative; } #pgv .film_director .list_dir .dir_item .dir_thumb > .avatar { width:18rem;height:auto; aspect-ratio:1 / 1; border-radius:0; border:1px solid rgba(255,255,255,0.2)} #pgv .film_director .list_dir .dir_item .dir_thumb > .d_filetext { position:absolute; bottom: 6px; left: 0; width:max-content; z-index:9;} #pgv .film_director .list_dir .dir_item .dir_thumb > .d_filetext span {position:absolute;background: #4a0106bf;border-radius: 0;padding: 7px 15px 6px 32px;font-size: 1.2rem; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;display: flex;width:max-content;max-width:70vw;padding: 0 2ex 0 4rem;top: 0;left: 0;height: 100%;align-items: center;z-index: -1;} #pgv .film_director .list_dir .dir_item .dir_thumb > .d_filetext:before { content: '©';z-index: 1; display: flex; justify-content:center; align-items:center; width:2em; height:auto; aspect-ratio:1 / 1; font-size: 1.6rem; color: #FFF; background-color: #9d1618;border-radius: border-radius:0; ; cursor: pointer; } #pgv .film_director .list_dir .dir_item .dir_thumb:hover > .d_filetext span, #pgv .film_director .list_dir .dir_item .dir_thumb:focus > .d_filetext span { opacity: 1; /* 텍스트를 보이도록 설정 */ visibility: visible; /* 텍스트를 표시 */ } #pgv .film_director .list_dir .dir_item .dir_info {padding-left:2rem} #pgv .film_director .list_dir .dir_item .dir_info .dir_name {display:inline-block;font-size:1.35em;margin-right:1rem; color:#d6d6d6; } #pgv .film_director .list_dir .dir_item .dir_info .dir_name_en {display:inline-block;opacity: 0.6;margin-bottom:0.5em; color:#757575; font-size:1.4rem; } #pgv .film_director .embed-responsive {position: relative;display: block; height: 0;padding:0; margin: 0; overflow: hidden;} #pgv .film_director .embed-responsive .embed-responsive-item, #pgv .film_director .embed-responsive iframe, #pgv .film_director .embed-responsive embed, #pgv .film_director .embed-responsive object, #pgv .film_director .embed-responsive video {position: absolute;top: 0;bottom: 0;left: 0;width: 100%;height: 100%;border: 0;} #pgv .film_director .embed-responsive-16by9 {padding-bottom: 56.25%;} #pgv .film_director .embed-responsive-4by3 {padding-bottom: 75%;} #pgv .film_director .embed-responsive2 {position: relative;display: block; height: 0;padding:0; margin: auto; overflow: hidden;} #pgv .film_director .embed-responsive2 .embed-responsive-item, #pgv .film_director .embed-responsive2 iframe, #pgv .film_director .embed-responsive2 embed, #pgv .film_director .embed-responsive2 object, #pgv .film_director .greeting_round { border-radius:1.2rem; } @media (min-width: 992px) { #pgv .film_director .list_dir {margin-top:10px;background:none;border-radius:0;margin-bottom:0;padding:0} #pgv .film_director .list_dir .dir_item {flex-direction: row; justify-content:flex-start;align-items: self-start;text-align: left} #pgv .film_director .list_dir .dir_item .dir_info .dir_name {font-size:2rem} #pgv .film_director .list_dir .dir_item .dir_info .dir_name_en {font-size:1.6rem} #pgv .film_director .list_dir .dir_item .dir_info .desc-s {width:70%;word-break:keep-all} } @media (max-width: 1440px) { #pgv .film_director .list_dir .dir_item {flex-direction:column;} #pgv .film_director .list_dir .dir_item .dir_info {padding-left:0;} } @media (max-width:1200px) { #pgv .film_director .pgv_tit {margin-top:8rem;} } @media (max-width:992px) { #pgv .film .filmdetail .list_dir .dir_item .dir_info {padding-left:0;} #pgv .film .filmdetail .list_dir .dir_item .dir_info .dir_name {margin-top:1rem;} #pgv .film .filmdetail .list_dir .dir_item .dir_thumb > .d_filetext:before {font-size:1.5rem;} #pgv .film .filmdetail .list_dir .dir_item .dir_thumb > .d_filetext span {/* top:2.5rem; lefT:50%; height:auto; padding:1ex 2ex; border-radius: 0.5rem; transform:translateX(-50%); */} } @media (max-width: 768px) { #pgv .film_director .list_dir .dir_item .dir_thumb > .avatar {width:calc((100% - 1rem) / 2)} } /*------------------------------------------------ //상영작뷰 감독정보 ------------------------------------------------*/ /*------------------------------------------------ 상영작뷰 크레딧 ------------------------------------------------*/ #pgv .credits ul {margin-top:-0.4rem;margin-bottom:-0.4rem; position:relative;} #pgv .credits ul li {padding-top:1.5rem;padding-bottom:1.5rem;line-height: 1.38; display: flex; flex-direction: row; border-bottom: 1px solid rgba(255, 255, 255, 0.20); } #pgv .credits ul li span {display:inline-block;padding-right:0.6rem;color:var(--txt-muted);font-weight: 500; font-size: 1.4rem; color:#d6d6d6 !important; } #pgv .credits ul li strong { display:block; color:#757575; /* min-width: 22rem; */ width:22rem; font-size: 1.6rem; flex-shrink:0;} #pgv .credits ul li:last-child { border-bottom:none; } @media (max-width:1440px) { #pgv .credits ul li {flex-flow:column; gap:1ex;} #pgv .credits ul li strong {width:100%;} } @media (max-width:1200px) { #pgv .credits {padding-left:0} } @media (max-width: 768px) { #pgv .credits {padding-left: 0;} } /*------------------------------------------------ //상영작뷰 크레딧 ------------------------------------------------*/ /*------------------------------------------------ 상영작뷰 포토 ------------------------------------------------*/ #pgv .filmphoto-slider.slick-slider:before {content:""; position:absolute; left:0; bottom:0; display:block; width:calc((100% - 55vw - 40px) / 2); height:100%;background:linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); z-index:1;} #pgv .filmphoto-slider.slick-slider:after {content:""; position:absolute; right:0; bottom:0; display:block; width:calc((100% - 55vw - 40px) / 2); height:100%; background:linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); z-index:1;} #pgv .filmphoto-slider.slick-slider .still_li {color:#fff;} #pgv .filmphoto-slider.slick-slider .still_li_inner {position:relative; width:55vw; height: auto; aspect-ratio: 900 / 506; margin:0 20px; border:1px solid rgba(255, 255, 255, 0.1); border-radius:0; background: #151515; overflow:hidden; opacity:0.5; transition:all 0.5s;} #pgv .filmphoto-slider.slick-slider .still_li_inner:after {content:""; position:absolute; left:0; right:0; bottom:0; width:100%; height:100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 30%, rgba(0, 0, 0, 0.60) 100%); z-index:1; transition:all 1s;} #pgv .filmphoto-slider.slick-slider .still_li_inner img {width:100%; height:100%; object-fit:contain; object-position:center; transition:all 0.5s;} #pgv .filmphoto-slider.slick-slider .slick-center .still_li_inner { border:1px solid rgba(255, 255, 255, 0.1); background: #111; opacity:1 ; transition:all 0.5s;} #pgv .filmphoto-slider.slick-slider .slick-center .still_li_inner img {width:100%; height:100%; object-fit:contain; object-position:center; transition:all 0.5s;} #pgv .film_photo .still_li_inner .wtmk {position: absolute; bottom: -1px; left: 0; right:0; padding:0 0 1em 0; text-align:center; font-size:1rem; font-weight:300; letter-spacing:0.03em; line-height:1.1; opacity:0.2; z-index:2; transition:all 1s;} #pgv .filmphoto-slider:not(.slick-slider) {display:flex; gap:2rem; justify-content:center; margin:0;} #pgv .filmphoto-slider:not(.slick-slider) .still_li {width:100%;max-width:50%; } #pgv .filmphoto-slider:not(.slick-slider) .still_li_inner {position:relative; width:100%; height:auto; margin:0; border:1px solid rgba(255, 255, 255, 0.1); overflow:hidden;} #pgv .filmphoto-slider:not(.slick-slider) .still_li_inner img {width:100%; height:100%; object-fit:contain; transition:all 0.5s;} #pgv .filmphoto-slider.slick-slider .slick-arrow {position:absolute; bottom:calc(50% - 3rem); width: 6rem; height: 6rem; margin:0 auto; font-size:0; transition:all 0.5s; z-index:3;mix-blend-mode: screen; opacity:0.3;} #pgv .filmphoto-slider.slick-slider .slick-arrow:after {content:""; display: block; width:100%; height: auto; aspect-ratio:1 / 1; border-top: 1px solid #fff; border-right: 1px solid #fff; } #pgv .filmphoto-slider.slick-slider .slick-arrow.slick-prev {left:3vw; transform: translateX(3rem) rotate(-135deg);} #pgv .filmphoto-slider.slick-slider .slick-arrow.slick-next {right:3vw; transform: translateX(-3rem) rotate(45deg);} #pgv .filmphoto-slider.slick-slider .slick-arrow:hover {opacity:1; mix-blend-mode: normal;} #pgv .filmphoto-slider.slick-slider .slick-arrow:hover:after {border-color:var(--biff-red); transition:all 0.5s; } #pgv .film_photo .slick-dots {position:relative; padding:5rem 0 0; width: 100%; margin: 0; list-style: none; text-align: center; z-index: 20;} #pgv .film_photo .slick-dots:before, #pgv .film_photo .slick-dots:after {clear:both;display:block;content:'';} #pgv .film_photo .slick-dots li {display:inline-block;margin:0 0.7rem; } #pgv .film_photo .slick-dots button { display:inline-block;position:relative;width:8px;height: 8px;padding: 0;text-indent: -9999px;border-radius:50px;-webkit-border-radius:50px; transition:background-color 700ms cubic-bezier(0.215, 0.61, 0.355, 1);border:0;background:none;background:#D9D9D9; } #pgv .film_photo .slick-dots li.slick-active button {background-color:var(--biff-red); } #pgv .film_photo .gallery-nav {margin-top:2rem} #pgv .film_photo .gallery-nav .slick-list { margin:0 -0.5rem;} #pgv .film_photo .gallery-nav .slick-track .slick-slide {margin-left:0.5rem;margin-right:0.5rem;} #pgv .film_photo .gallery-nav .slick-track {float:left;} @media (max-width: 1440px) { #pgv .filmphoto-slider {margin-left:-4.5vw; margin-right:-4.5vw;} #pgv .film_photo .still_li_inner {margin:0 1.4vw;} } @media (max-width:992px) { #pgv .filmphoto-slider {margin-left:0; margin-right:0;} #pgv .filmphoto-slider.slick-slider {margin-left:0; margin-right:0;} #pgv .film_photo .still_li_inner {width:100%; height:auto; aspect-ratio: 1000 / 667; margin:0;} #pgv .filmphoto-slider.slick-slider .still_li_inner, #pgv .filmphoto-slider.slick-slider .slick-center .still_li_inner{width:100%;margin: 0;} #pgv .film_photo .slick-dots {padding-top:2rem;} #pgv .filmphoto-slider.slick-slider:before, #pgv .filmphoto-slider.slick-slider:after {display:none;} #pgv .filmphoto-slider.slick-slider .slick-center .still_li_inner img {/* object-fit:cover; */} } @media (max-width: 768px) { #pgv .film_photo {padding: 5rem 0;} #pgv .filmphoto-slider.slick-slider .slick-arrow {width:3rem;} #pgv .filmphoto-slider.slick-slider .slick-arrow.slick-prev {left:2rem; transform:translateX(0) rotate(-135deg)} #pgv .filmphoto-slider.slick-slider .slick-arrow.slick-next {right:2rem; transform:translateX(0) rotate(45deg)} } /*------------------------------------------------ //상영작뷰 포토 ------------------------------------------------*/ /*------------------------------------------------ 상영작뷰 연관섹션 ------------------------------------------------*/ #pgv .related_films {position:relative;margin-top:10rem; margin-bottom:20rem; padding-top:10rem; border-top:1px solid rgba(255,255,255,0.15); } #pgv .related_swiper {width:100%; overflow-x:hidden;} #pgv .related_swiper .swiper-wrapper .swiper-slide {position:relative; background:#000; } #pgv .related_swiper .swiper-wrapper .swiper-slide a {position:relative; display:block; width:100%; height:auto; overflow:hidden; aspect-ratio: 3 / 2; color:#fff; border: 1px solid rgba(255, 255, 255, 0.20); border-radius:0;} #pgv .related_swiper .swiper-wrapper .swiper-slide img {width:100%;height:100%; overflow:hidden; object-fit: cover; } #pgv .related_swiper .swiper-wrapper .swiper-slide .pack_mv_thumb .mv_titbox { position:absolute; top:0; left:0; opacity: 0; visibilit:y hidden; transition: opacity 0.3s ease, visibility 0.3s ease; background:rgba(0,0,0,0.80); width:100%; height:100%; display: flex; justify-content: center; flex-wrap: wrap; flex-direction: column; align-items: center; } #pgv .related_swiper .swiper-wrapper .swiper-slide .pack_mv_thumb .mv_titbox .mv_tit {display:block;font-size:1.8rem;line-height:normal;color:#fff;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } #pgv .related_swiper .swiper-wrapper .swiper-slide .pack_mv_thumb .mv_titbox .mv_tit_en {margin-top:1rem;color:#D6D6D6;font-size:1.6rem;} #pgv .related_swiper .swiper-wrapper .swiper-slide a:hover .pack_mv_thumb .mv_titbox, #pgv .related_swiper .swiper-wrapper .swiper-slide a:focus .pack_mv_thumb .mv_titbox { opacity: 1; visibility: visible;} #pgv .related_swiper .swiper-pager {position:relative; width:100%; height:1px; margin: 3em auto 0;} #pgv .related_swiper .swiper-pager .pager_progressbar {width:100%; height:1px; background-color:rgba(255,255,255,0.15);} #pgv .related_swiper .swiper-pager .pager_progressbar .swiper-pagination-progressbar-fill {background-color:var(--biff-red);} #pgv .bt_return { text-align: center; } #pgv .bt_return .bt_return_btn { font-size:2rem; color: #D6D6D6; padding-top: 6rem; display: inline-block; font-weight: 700; letter-spacing: -0.1rem;} #pgv .bt_return .bt_return_btn:before { content: url('/kor/img/cmm/bt_return_btn.png'); display:block; margin-bottom: 1rem; } @media (max-width:992px) { #pgv .related_swiper .swiper-wrapper .swiper-slide .pack_mv_thumb { width: 100%; height: auto; aspect-ratio: 1000 / 667; margin: 0; } #pgv .related_swiper .swiper-wrapper .swiper-slide .pack_mv_thumb .mv_titbox { padding: 2rem; justify-content: flex-end; align-items: start; background:linear-gradient(1deg, black, transparent); opacity:1; visibility:visible;} #pgv .related_swiper .swiper-wrapper .swiper-slide .pack_mv_thumb .mv_titbox .mv_tit {font-size:1.4rem;} } @media (max-width:768px) { #pgv .related_films .rolling_pack {margin-top:3.6rem;} } @media (max-width:430px) { #pgv .related_films {margin-top:5rem; margin-bottom:10rem; padding-top:5rem;} } /*------------------------------------------------ 상영작뷰 연관섹션 ------------------------------------------------*/ /* ------------------------------------------------------------------------------------------------------------------------------------------------ END ) 공식상영작 > 상영작 뷰 (prog_view.asp) ------------------------------------------------------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------------------------------------------------------ START ) 공식상영작 > 작품검색 (movie_list.asp) ------------------------------------------------------------------------------------------------------------------------------------------------ */ /* 통합검색 */ .modal-mask {position:fixed;top:0;left:0;width:100%;height:100%;z-index:99} .modal_wrap {position:relative;width:100%;height:100%} .search_wrap {/*background:#fff;*/width:100%;height:100%;padding:50px 0;} /* 닫기 버튼 */ .btn_close {position:absolute;top:30px;right:30px;bottom:0;display:inline-block;width:28px;height:22px;font-size:0;line-height:0;z-index:100;} .btn_close .line{position:absolute;left:0;height:2px;background-color:#131313;transition:0.15s all linear;-webkit-transition:0.15s all linear;font-size:0;line-height:0;} .btn_close .tline, .btn_close:hover .bline, .btn_close:focus .bline{width:28px;top:10px;-webkit-transform: rotate(180deg);transform: rotate(45deg);} .btn_close .mline{display:none;} .btn_close .bline, .btn_close:hover .bline, .btn_close:focus .bline{width:28px;bottom:10px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);} .btn_close:hover .line, .btn_close:focus .line{background-color:#555;cursor:pointer} /* search input */ .search_wrap .inp_search_wrap {position:relative; border-radius:50px; -webkit-border-radius:50px;padding:0 30px;} .search_wrap .inp_search_wrap:before, .search_wrap .inp_search_wrap:after {content:'';clear:both;display:block;} .search_wrap .inp_search_wrap .btn_search_l {float:left;display:inline-block;width:34px;height:81px;background:url(/kor/img/cmm/ico_search.png) no-repeat 50% 50%} .search_wrap .inp_search {float:left;width:calc(100% - 80px); font-size:26px;letter-spacing:-0.5px;;border:none;background:none} .search_wrap .inp_search:focus {border-color:#e0e0e0} input::-ms-input-placeholder { color: #ccc; } input::-webkit-input-placeholder { color: #ccc; } input::-moz-placeholder { color: #ccc;} .btn_delete {position:absolute;right:50px;top:0px;bottom:0;width:24px;height:24px;margin:auto auto} .btn_delete .ico_delete {display:inline-block;width:24px;height:24px;background:url(/kor/img/cmm/ico_del.png) no-repeat 50% 50%} .search_wrap .search_helper {padding-top:60px} .search_wrap .search_helper .search_helper_event {} .search_wrap .search_helper .search_helper_sec {margin-top:30px} .search_wrap .search_helper .search_helper_sec:first-child {margin-top:0} .search_wrap ul:before, .search_wrap ul:after {clear:both;display:block;content:'';} .search_wrap ul {margin-top:20px} .search_wrap ul li {float:left;font-size:15px;line-height:1.5;letter-spacing:-0.5px;font-weight:300} .search_wrap ul li a {display:inline-block;} ul.tag li {margin-right:8px;margin-bottom:10px} ul.tag li:before {content:'#'} ul.tag-rounded li {border:1px solid #ccc;border-radius:50px;-webkit-border-radius:50px;padding:6px 16px 6px 15px;margin-right:5px;margin-bottom:10px; color:#888;background:#f5f5f5} ul.list_event li {margin-right:18px;margin-bottom:20px} ul.list_event li a {overflow:hidden;} ul.list_event li a img {width:110px;height:110px;} ul.list_event li a .desc {margin-top:8px} .btn_search_more {} /* 통합검색 - 결과 */ .search_cont {padding:0} .search_cont .count {margin-left:4px} .search_cont .pgl {padding-top:20px} .search_cont .pgl .pg_li .film_thumb {height:140px;} .search_cont .pgl .pg_li .film_thumb img {min-height:140px} .search_cont .pgl .pg_li .txtbox {margin-top:12px;height:60px} .search_cont .pgl .pg_li .txtbox .film_tit {font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .search_cont .pgl .pg_li .txtbox .dir {font-size:14px;margin-top:5px} .search_cont .evtl .evt_li .evt_tit {font-size:18px;font-weight:500} .search_cont .evtl .evt_li .evt_info .date {margin-top:8px} .search_cont .evtl .evt_li .thumb {height:80px;} .search_cont .evtl .evt_li .thumb img {min-height:80px;} /* 상영작 통합검색 */ .shfrm_wrap {background:none;padding-bottom:85px;} .shfrm_tit {color:#222;padding-top:30px;padding-bottom:20px;text-align:left} .shmenu {width:100%;position:relative;display:block;text-align:center;padding: 30px 0 20px} .shmenu li {display:inline-block;text-align:center; padding: 0 10px;} .shmenu li a{display:block;position:relative;font-size:26px;line-height:30px; font-weight:400;letter-spacing:-1px;color:#aaa} .shmenu li.en {margin:0;} .shmenu li.on{} .shmenu li.on a {color:#bca96f;font-weight:bold;text-decoration:underline} /* 리스트 */ .shfrm_list:before, .shfrm_list:after {display:block;content:'';clear:both} .shfrm_list{text-align:center;} .shfrm_list li {display:inline-block; padding:6px;} .shfrm_list li a {font-size:15px;line-height:32px;color:#ccc;color:#666;display:block;padding:0 16px;font-weight:300; border:1px solid #ccc;border-radius:50px;-webkit-border-radius:50px;letter-spacing:-1px} .shfrm_list li a:hover {color:#fff; background:#111; border:1px solid #111;} .shfrm_list li a.current {background:#444;color:#fff;border-color:#444} .shfrm_list.country_list li a, .shfrm_list.index_list_eng li a {letter-spacing:0 !important;color:#888} .shfrm_list.country_list li a:hover, .shfrm_list.index_list_eng li a:hover {color:#fff} /* movie quick search 검색창 */ .movieserach_wrap {position:relative; text-align:center;} .movieserach_wrap .inp_search_wrap {position:relative; display:inline-block; width:100%; border-bottom:3px solid #151515; padding:35px 0; z-index:10; border-radius:0; -webkit-border-radius:0;} .movieserach_wrap .inp_search_wrap:before, .movieserach_wrap .inp_search_wrap:after {clear:both;display:block;content:'';} .movieserach_wrap .inp_search_wrap .inp_search {float:left; border:0; font-size:26px; font-weight:500; color:#333; text-align:center;} .movieserach_wrap .inp_search_wrap .btn_search {display:inline-block;float:left;width:40px;height:30px;background:url(/kor/img/cmm/ico_search_input.png) no-repeat 100% 50% #f5f5f5;} .movieserach_wrap .qsearch_dropdown {position:absolute;top:30px;left:0;width:100%;background:#f5f5f5;width:330px; border-radius: 0 0 10px 10px;padding:20px 25px;} .movieserach_wrap .qsearch_dropdown ul {border-top:1px solid #eee;padding-top:10px;} .movieserach_wrap .qsearch_dropdown ul li {font-size:15px;line-height:1.5;color:#888;margin:8px 0;letter-spacing:-0.5px;} .movieserach_wrap .qsearch_dropdown ul li strong {color:#e14545;font-weight:400} /* join 체크박스 */ .chk-primary input[type=checkbox] {position:absolute;top:0;left:0;width:0;height:0;opacity:0;} .chk-primary input[type=checkbox] + label {cursor:pointer;color:#444;font-size:17px;letter-spacing:-0.5px;font-weight:400;} .chk-primary input[type=checkbox] + label span {display:inline-block;width:30px;height:30px;margin-right:10px;box-sizing:border-box;border-radius:50px;-webkit-border-radius:50px; border:1px solid #ccc;background:url(/kor/img/cmm/ico_chk_member.png) no-repeat center center #ddd;vertical-align:middle; transition:all 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);-webkit-transition:all 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946) } .chk-primary input[type=checkbox]:checked + label span {background:url(/kor/img/cmm/ico_chk_member.png) no-repeat center center #ce1e36;border-color:#ce1e36} .chk-secondary input[type=checkbox] {position:absolute;top:0;left:0;width:0;height:0;opacity:0;} .chk-secondary input[type=checkbox] + label {cursor:pointer;color:#444;font-size:16px;font-weight:400} .chk-secondary input[type=checkbox] + label span {display:inline-block;width:22px;height:22px;margin-right:8px;box-sizing:border-box;border-radius:50px;-webkit-border-radius:50px; border:1px solid #cdc3ea;background:url(/kor/img/cmm/ico_chk_member.png) no-repeat center center #ddd;vertical-align:middle; transition:all 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);-webkit-transition:all 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946) } .chk-secondary input[type=checkbox]:checked + label span {background-color:#ce1e36;border-color:#ce1e36} @media (max-width:768px) { .search_wrap {padding:20px;} .qserach_wrap {margin-top:20px !important;margin-left:0;width:100% !important} .qserach_wrap .inp_search_wrap {position:relative;width:100%;padding:6px;padding-left:40px;background-size:18px;background-position:18px 50%} .qserach_wrap .qsearch_dropdown {width:100%} .qserach_wrap .inp_search_wrap .inp_search {line-height:30px;font-size:16px;} .shfrm_wrap {padding:15px 0} .shfrm_tit {padding-top:0px;padding-bottom:0px} .shmenu {text-align:left;overflow-x:scroll;white-space:nowrap;padding: 20px 0 20px;border-bottom:1px solid #e0e0e0} .shmenu li {float:none;padding:0 3px;} .shmenu li:first-child {padding-left:0} .shmenu li a {font-size:16px} .shfrm_list.index_list_kor {margin-bottom:20px} .shfrm_list li {padding:6px 3px;} .shfrm_list li a {font-size:14px;line-height:26px;padding:0 14px} } @media (max-width:430px) { /* 통합검색 페이지 */ .search_wrap {padding:20px 0px;} .search_wrap .inp_search_wrap {padding:0 20px;width:100%} .search_wrap .inp_search_wrap .btn_search_l {background-size:19px;height:45px;} /* .search_wrap .inp_search {padding:5px 10px 5px 10px;line-height:35px;font-size:16px;} */ .btn_delete {width:16px;height:45px;right:15px;} .btn_delete .ico_delete {width:12px;height:12px;background-size:12px} .search_wrap .btn_close {top:20px;right:15px;} .pgl .pg_li .film_thumb .prem {top:6px;left:6px;font-size:10px;padding:2px 6px} .qserach_wrap {margin-bottom:0;} .qserach_wrap .inp_search_wrap {padding-left:6px !important;} .movieserach_wrap .inp_search_wrap {padding:10px 5px; display:block;} .movieserach_wrap .inp_search_wrap .inp_search {font-size:18px; text-align:left;} .movieserach_wrap .inp_search_wrap .sbtn {float:right; width:30px; } .search_wrap .inp_search {width:calc(100% - 50px);} } /* ------------------------------------------------------------------------------------------------------------------------------------------------ END ) 공식상영작 > 작품검색 (movie_list.asp) ------------------------------------------------------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------------------------------------------------------ START ) 상영시간표(schedule > date.asp, theater.asp, section.asp) ------------------------------------------------------------------------------------------------------------------------------------------------ */ .schedule .grade_info {margin-bottom:10px;background: #f9f9f9;display: flex;flex-wrap: wrap;border: 0.5px solid #dedede; transition:all 0.5s} .schedule .grade_info:has(.closed) {box-shadow: 0 8px 24px #1a29470a, 0 2px 8px #1a294714;} .schedule .grade_info:has(.closed):hover {border-color:var(--biff-red);} .schedule .grade_info .grade_tit { font-size: 18px; font-weight: bold; background: #ffffff; color: #000000; width: 100%;} .schedule .grade_info .grade_tit a {display:flex; align-items:center; justify-content:space-between; padding: 16px 20px; } .schedule .grade_info .grade_tit span {font-weight:bold; letter-spacing:-0.02em;} .schedule .grade_info .grade_tit span svg {height:30px; color:var(--biff-red);} .schedule .grade_info .grade_tit i {display:block; width:10px; height:10px; border-right:1px solid var(--biff-red); border-bottom:1px solid var(--biff-red); transform:translateY(2px) rotate(-135deg) ; transition:all 0.5s;} .schedule .grade_info .grade_tit .closed i { transform:translateY(-2px) rotate(45deg); border-color:var(--biff-red)} .schedule .grade_info .grade_cont {width:100%;} .schedule .grade_info .grade_dls {display:flex;width: 100%; padding:30px; gap:40px;} .schedule .grade_info dl {width: calc((100% - 80px) / 3);} .schedule .grade_info dl dt { display: block; padding: 5px 5px 10px 5px; border-bottom: 1px solid #ddd; margin-bottom: 20px; font-size: 16px; color: #000; font-weight: 500; font-weight: bold; letter-spacing: -0.02em; } .schedule .grade_info dl dd ul {display:flex; flex-direction:column; gap:10px;} .schedule .grade_info dl dd ul li {font-size: 14px;line-height:1.4;margin-right:8px;color: #000000;font-weight: 400;display: flex;align-items: baseline;} .schedule .grade_info dl dd ul li .ico_grade {margin-right: 10px;font-size: 13px;text-align: center;color: #fff;font-weight: 500;letter-spacing: 0em;border: 1px solid transparent;display: flex;justify-content: center;align-items: center;} .schedule .grade_info dl dd ul li:has(.ico_bundle) {align-items:center;} .schedule .grade_info .gvinfo_box {position:relative;border-bottom: none;padding: 20px 35px;background: #f3f3f3;width: 100%;} .schedule .grade_info .gvinfo_box .gvtitle {font-size: 16px;font-weight:bold;letter-spacing:-1px;padding: 0 0 0px 0;border-bottom: none;margin: 0;} .schedule .grade_info .gvinfo_box .gvtitle b {font-weight:bold; display:inline-block; /* box-shadow:inset 0px -6px 0 0 rgb(255 202 202); */line-height:1;} .schedule .grade_info .gvinfo_box ul {padding:0 0;margin: 10px 0 0px;} .schedule .grade_info .gvinfo_box ul li {position:relative;font-size: 15px;line-height:1.5;color: #555;margin-top:5px;padding-left:15px;letter-spacing:-0.5px;font-weight:400} .schedule .grade_info .gvinfo_box ul li:before {content:'';display:inline-block;width:5px;height:1px;background:#999; position:absolute;top:10px;left:3px;} .schedule .grade_info .gvinfo_box .btnbox { position:absolute;bottom:-10px;right:30px;} .schedule_hd {position:relative;width:100%;background: #fff;border-bottom:1px solid #e0e0e0;padding:30px 0; box-shadow:1px 1px 10px rgba(0,0,0,.1);z-index:30} .schedule_hd .sch_1depth, .schedule_hd .sch_2depth {text-align:center;} .schedule_hd .sch_1depth > ul:before, .schedule_hd .sch_1depth > ul:after, .schedule_hd .sch_2depth > ul:before, .schedule_hd .sch_2depth > ul:after {clear:both;display:block;content:'';} .schedule_hd .sch_1depth li a{display:inline-block;font-size:18px;line-height:1.8;cursor:pointer;padding:6px 30px;color:#222;letter-spacing:-1px; } .schedule_hd .sch_1depth li.on {background:#bf202c;border-radius:50px;-webkit-border-radius:50px;} .schedule_hd .sch_1depth li.on a {color:#fff} .schedule_hd .sch_2depth {margin-top:25px;} .schedule_hd .sch_2depth li a{display:block;position:relative;font-size:17px;line-height:1.6;padding:0 10px;color:#aaa;cursor:pointer;} .schedule_hd .sch_2depth li a .date {display:block;font-size:36px;line-height:40px;text-align:center;font-weight:300;margin-top:3px;letter-spacing:0 !important;font-family: 'Lato', sans-serif;} .schedule_hd .sch_2depth li.on a {color:#111;font-weight:bold} .schedule_tab_sec .sch_2depth {position:relative;white-space:nowrap;width:100%;text-align:center} .schedule_tab_sec .sch_2depth li {font-size:16px;white-space:nowrap;width:auto !important;float:none;display:inline-block;padding:0 20px} .schedule_tab_sec .sch_2depth .slick-arrow {z-index:20} .schedule_tab_sec .sch_2depth .slick-next {position:absolute;top:2px;right:0;display:inline-block;width:20px;height:27px;background:url(/kor/img/schedule/btn_sch_arrow_next.png) no-repeat 50% 50%;text-indent:-99999px} .schedule_tab_sec .sch_2depth .slick-prev {position:absolute;top:2px;left:0;display:inline-block;width:20px;height:27px;background:url(/kor/img/schedule/btn_sch_arrow_prev.png) no-repeat 50% 50%;text-indent:-99999px} .schedule_tab_sec .sch_2depth .slick-list:before {content:'';position:absolute;top:0;left:0px;width:30px;height:27px;background-color:#fff;z-index:10 } .schedule_tab_sec .sch_2depth .slick-list:after {content:'';position:absolute;top:0;right:0px;width:70px;height:27px;background:url(/kor/img/schedule/gr-red-right.png) repeat-y;z-index:10 } /* 상영시간표 테이블 타이틀 */ .tbl_schedule_top {display:flex; justify-content:space-between; align-items: flex-end; flex-wrap:wrap; position:relative;padding:30px 0 20px; gap:1ex; } .tbl_schedule_top h3.tit_schedule {font-size:28px;line-height:1.5;font-weight:700;letter-spacing:-1.5px;display:inline-block;} .tbl_schedule_top h3.tit_schedule * {font-weight:700;} .tbl_schedule_top .pull-left {float:none; display:flex; flex-wrap:wrap; align-items:center; gap:0; margin-lefT:00;} .tbl_schedule_top .pull-left:before, .tbl_schedule_top .pull-left:after {display:none;} /* 상영관선택 */ .sch_3depth_wrap {display:inline-block;border-radius:0;} .custom-sel-fliter {margin-left:10px} .sch_3depth_wrap .select-custom .select {display:block;} .sch_3depth_wrap .select-custom .select-styled {color: #222; min-width: 250px; width: 100%; padding: 0 30px 5px 0; border: none; border-bottom: 2px solid #000; background: #fff; border-radius: 0; font-size: 28px; font-weight: 700; display: flex; align-items: center; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -1px;} .sch_3depth_wrap .select-custom .select-styled:after {top:1ex; border:6px solid transparent; border-color: #111 transparent transparent transparent;} .sch_3depth_wrap.active .select-custom .select-styled:after {top:.5ex;border-color: transparent transparent #111 transparent;} .sch_3depth_wrap .select-custom .select-list {width:auto; border-radius: 0;background: #fff;border: none;top: calc(100% + 2px);border: 2px solid #000; } .sch_3depth_wrap .select-custom .select-list li:not(:last-child) {border-bottom:1px solid #ddd;} .sch_3depth_wrap .select-custom .select-list li a {display:block; padding:1ex; color:#aaa; font-size:1.1em; font-weight:500;} .sch_3depth_wrap .select-custom .select-list li a.on {color:#ce1e36; font-weight:600;} .sch_3depth_wrap .select-custom .select-list li a:hover {color:#000} /* 등급선택 */ .sch_grade_select {display:flex; align-items:flex-end; gap:1ex 1em; flex-wrap:wrap;} .sch_grade_select > .it {float:none; margin-left:0;} .sch_grade_select > .it .select {border-bottom:1px solid #000;} .sch_grade_select > .it .select:has(.ico_none) {border-bottom:1px solid #aaa;} .select-custom.custom-sel-fliter .select-styled {display:flex; align-items:baseline; gap:4px; padding:12px 20px 12px 6px; width:max-content; height:auto; line-height:1; font-weight:600;border:0;color:#000;background-color:#fff;line-height: 1.2;} .select-custom.custom-sel-fliter .select-hidden.ico_none + .select-styled {font-weight:500;color:#888;} .select-custom.custom-sel-fliter .select-styled:after {top:calc(50% - 2px); right:6px; border-coloR:#000 transparent transparent transparent;} .select-custom.custom-sel-fliter .select-hidden.ico_none + .select-styled:after {border-coloR:#888 transparent transparent transparent;} .select-custom.custom-sel-fliter .select-styled.active:after {top:12px; border-coloR: transparent transparent #000 transparent;} .select-custom.custom-sel-fliter .select-hidden.ico_none + .select-styled.active:after {border-coloR: transparent transparent #888 transparent} .select-custom.custom-sel-fliter .select-list {top:100%;left:auto;width:max-content;padding:0;border:1px solid #111;border-radius:3px; z-index:1001;} .select-custom.custom-sel-fliter .select-list li {display:flex; gap:4px; align-items:baseline; padding:12px 7px 12px 7px; font-weight:500; line-height: 1.2;} .select-custom.custom-sel-fliter .select-list li[rel=""]{padding-left:10px; color:#000;} .select-custom.custom-sel-fliter .select-hidden:not(.ico_none) + .select-styled:before, .select-custom.custom-sel-fliter .select-list li:not([rel=""]):before {content:""; display:block; width:32px; height:18px; color:#fff; align-content:center; text-align:center; font-size:13px; font-weight:500; flex-shrink:0;} /*전체관람가*/ .select-custom.custom-sel-fliter .select-hidden.ico_124 + .select-styled:before, .select-custom.custom-sel-fliter .select-list li[rel="124"]:before {content:"ALL"} /*12세관람가*/ .select-custom.custom-sel-fliter .select-hidden.ico_125 + .select-styled:before, .select-custom.custom-sel-fliter .select-list li[rel="125"]:before {content:"12"} /*15세관람가*/ .select-custom.custom-sel-fliter .select-hidden.ico_126 + .select-styled:before, .select-custom.custom-sel-fliter .select-list li[rel="126"]:before {content:"15"} /*청소년관람불가*/ .select-custom.custom-sel-fliter .select-hidden.ico_127 + .select-styled:before, .select-custom.custom-sel-fliter .select-list li[rel="127"]:before {content:"19"} /*KE*/ .select-custom.custom-sel-fliter .select-hidden.ico_177 + .select-styled:before, .select-custom.custom-sel-fliter .select-list li[rel="177"]:before {content:"KE"} /*KN*/ .select-custom.custom-sel-fliter .select-hidden.ico_178 + .select-styled:before, .select-custom.custom-sel-fliter .select-list li[rel="178"]:before {content:"KN"} /*KK*/ .select-custom.custom-sel-fliter .select-hidden.ico_179 + .select-styled:before, .select-custom.custom-sel-fliter .select-list li[rel="179"]:before {content:"KK"} /*No*/ .select-custom.custom-sel-fliter .select-hidden.ico_180 + .select-styled:before, .select-custom.custom-sel-fliter .select-list li[rel="180"]:before {content:"NO"} /*무*/ .select-custom.custom-sel-fliter .select-hidden.ico_181 + .select-styled, .select-custom.custom-sel-fliter .select-list li[rel="181"]{background-image:url('/kor/img/cont/schedule/ico_blank_m.png')} /*KE+KK*/ .select-custom.custom-sel-fliter .select-hidden.ico_1318 + .select-styled {background-image: url(/kor/img/cont/schedule/ico_a_m.png), url(/kor/img/cont/schedule/ico_kk_m.png); background-position: 0 50%, 21px 50%; padding-left: 48px;} .select-custom.custom-sel-fliter .select-list li[rel="1318"]{background-image:url('/kor/img/cont/schedule/ico_a_m.png'),url('/kor/img/cont/schedule/ico_kk_m.png'); background-position:8px calc(50% - 11px), 8px calc(50% - -9px);} .select-custom.custom-sel-fliter .select-list li:hover {color:#fff; background-color:#333;} .select-custom.custom-sel-fliter .select-list li[rel=""]:hover{color:#000; background-color:#fff;} .select-custom.custom-sel-fliter .select-list li:not(:last-child) {border-bottom:1px solid #ddd;} .chk_gv .chk-primary input[type=checkbox] + label {display:inline-block;line-height:1.2; padding:12px 0 11px 0; float:right;color:#888;font-weight: 500;font-size:14px;border-radius: 0;background: #fff;border-bottom: 1px solid #aaa;} .chk_gv .chk-primary input[type=checkbox] + label span {width:20px;height:20px;border:0;margin-top:-3px; margin-right:5px;background:url('/kor/img/cmm/ico_chk_member_gray.png') no-repeat 50% 50% #fff;border:1px solid #aaa; background-size:50%;} .chk_gv .chk-primary input[type=checkbox]:checked + label {color:#9c27b0; border-color:#9c27b0; font-weight: 600; } .chk_gv .chk-primary input[type=checkbox]:checked + label span {background:url(/kor/img/cmm/ico_chk_member.png) no-repeat 50% 50%;background-color:#9c27b0;border-color:#9c27b0;background-size:50%;} /* 상영시간표 테이블 */ .tbl_schedule .sch_li .sch_li_tit {width:100%;font-size: 17px;color: #fff;background: #000;font-weight: 400;padding: 0.5ex 1em;/* letter-spacing:-1px; */border: 1px solid #000000;border-bottom:none;border-radius: 0;} .tbl_schedule .sch_li .sch_li_tit a {color:#fff; text-decoration:underline;} .tbl_schedule .sch_li .sch_li_tit a:hover {color:#ffbdc1} .tbl_schedule .sch_li {position:relative;display:block;padding:4rem 0;border-top:1px dashed #e0e0e0; letter-spacing:-0.02em} .tbl_schedule .sch_li:before, .tbl_schedule .sch_li:after {clear:both;display:block;content:''} .tbl_schedule .sch_li:first-child {padding-top:0;border-top:0} .tbl_schedule .sch_li:nth-child(even) {background:#fff} .tbl_schedule .sch_li .sch_it {position:relative;display:block;float:left;padding:15px;width:16.666666%;border: 1px solid #eaeaea;height:215px;} .tbl_schedule .sch_li .sch_it:last-child {border-right: 1px solid #eaeaea;} .tbl_schedule .sch_li .sch_it.blank_wrap {background:#f3f3f3;} .tbl_schedule .sch_li .sch_it .code {position:absolute;top:15px;right:10px;width:3em;height:1.5em;text-align:center;align-content: center;font-size:13px;line-height: 1;color: #eb1414;font-weight:600;padding:0ex 1ex; border-radius:50px; -webkit-border-radius:50px; z-index:2;border: 1px solid #ff3434;} .tbl_schedule .sch_li .sch_it .code_btn {cursor:pointer;} .tbl_schedule .sch_li .sch_it .code_btn:hover {color:#fff; background-color:var(--biff-red);} .tbl_schedule .sch_li .sch_it .time {font-size:16px; font-weight:bold;line-height:1.5;display:inline-block;margin-top:0} .tbl_schedule .sch_li .sch_it .film_tit {line-height:1.5;overflow:hidden;} .tbl_schedule .sch_li .sch_it .notice {font-size:12px; color:#666; line-height:1.5;} .tbl_schedule .sch_li .sch_it .film_tit .film_tit_kor{display:block;font-size: 1.8rem;;word-break:keep-all;margin: 1ex 0;} .tbl_schedule .sch_li .sch_it .film_tit a .film_tit_kor {text-decoration: underline; letter-spacing:-0.02em} .tbl_schedule .sch_li .sch_it .film_tit:has(.pack) .film_tit_kor{text-decoration:none;} .tbl_schedule .sch_li .sch_it .film_tit:hover .film_tit_kor{color:#ce1e36} .tbl_schedule .sch_li .sch_it .film_tit .theater_eng {display: block; max-height:4.3em;font-size: 1.8rem; word-break: keep-all; margin: 1ex 0; display: -webkit-box; overflow: hidden;text-overflow: ellipsis; -webkit-line-clamp:3; -webkit-box-orient: vertical;} .tbl_schedule .sch_li .sch_it .film_tit_bdl { margin-top:1ex; font-size:1em; font-weight:600;} .tbl_schedule .sch_li .sch_it .film_tit .film_tit_kor .ico_bundle, .tbl_schedule .sch_li .sch_it .film_tit_bdl .ico_bundle {display:inline-block; width:2.2rem; height:2.2rem; margin-left:0.5ex; background:#e5e5e5 url(/kor/img/cont/schedule/ico_bundle.svg) no-repeat center; background-size:80%; border-radius:3px; border: 1px solid #ddd; vertical-align: bottom;} .tbl_schedule .sch_li .sch_it .film_tit .film_tit_eng {display:block;font-size:13px;color:#888;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:90%; white-space:nowrap; text-overflow:ellipsis;} .tbl_schedule .sch_li .sch_it .grade {position:absolute;bottom: 0;left: 0;right: 0;display: flex;justify-content:flex-start;width: 100%;padding: 15px;/* gap: 0.5rem; */} .tbl_schedule .sch_li .sch_it .grade > span {margin-right: 0;} .tbl_schedule .sch_li .sch_it .grade .ico_grade {cursor:help;} .tbl_schedule .sch_li .sch_it .sch_it_blank {display:block;width:100%;padding:0;} /* 묶음상영 */ .tbl_schedule .sch_li .sch_it .film_tit {position:relative; overflow:visible;} .tbl_schedule .sch_li .pack {opacity:0; visibility:hidden; position:absolute;bottom:0; left:50%; top:100%; display: flex; flex-flow: column; justify-content: center; width:130%; min-height:100%; height:fit-content; border: 1px solid rgba(255, 255, 255, 0.3);background-color:rgba(0,0,0,0.9); border-radius:1ex; transform:translateX(-50%); z-index:3; overflow:hidden;} .tbl_schedule .sch_li .pack .pack_list::-webkit-scrollbar { width:5px; height:5px;} .tbl_schedule .sch_li .pack .pack_list::-webkit-scrollbar-track { background: rgba(255,255,255, 0); border-radius: 4px; } .tbl_schedule .sch_li .pack .pack_list::-webkit-scrollbar-thumb { background: rgba(255,255,255, 0.3); border-radius: 4px; } .tbl_schedule .sch_li .pack .pack_list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255, 0.3); } .tbl_schedule .sch_li .pack .pack_list li:not(:last-child) {border-bottom: 1px solid rgba(255, 255, 255, 0.1);} .tbl_schedule .sch_li .sch_it .pack .pack_list a {display:block; padding:1em;} .tbl_schedule .sch_li .sch_it .pack a:hover { background:#000;} .tbl_schedule .sch_li .sch_it .film_tit .pack .film_tit_kor {display:block; height:auto; margin-bottom:0.5ex; color:#fff; font-size:15px;font-weight:500;overflow:visible; white-space:normal; line-height:1.4;} .tbl_schedule .sch_li .sch_it .film_tit .pack .film_tit_kor i.xi-angle-right {margin-left:0.5ex; font-size:0.8em; color:#ff9197} .tbl_schedule .sch_li .sch_it .pack .pack_list a:hover .film_tit_kor {color:#ffacb0} .tbl_schedule .sch_li .sch_it .pack .pack_list a:hover .film_tit_eng {color:#fff} .tbl_schedule .sch_li .ico_pack_more {display:inline-block;border:1px solid #ccc;color:#666;background:#f5f5f5;padding:0px 5px;border-radius:50px;-webkit-border-radius:50px;font-size:12px;display:none} .tbl_schedule .sch_li .sch_it .tt_pop {position:absolute;top:0;left:0;width:100%;height:100%;background:#222;padding:20px;color:#fff;display:none} .tbl_schedule .sch_li .sch_it:hover .tt_pop {display:block;} .tbl_schedule .sch_li .sch_it .tt_pop .pop_sec_tit, .tbl_schedule .sch_li .sch_it .tt_pop .pop_film_tit {font-size:16px;} .schedule .caution_box {padding:24px; background:#fff; border:1px solid #eaeaea;} .schedule .caution_box .tit-sec {display:inline-block; margin:0; font-size:17px; font-weight:bold; line-height:1; box-shadow: inset 0px -4px 0 0 rgb(255 158 158);;} .schedule .caution_box .list_secondary { display: flex; flex-flow: column;gap: 1ex; margin-top:0; } .schedule .caution_box .list_secondary li { padding-left: 0.8em; font-size: 14px; text-indent: -0.8em;} .schedule .caution_box .list_secondary li:before { content: "ㆍ"; font-weight: 900; color: #DA1212; } @media (min-width: 769px) { .tbl_schedule .sch_li .sch_it + .sch_it {border-left:0} .tbl_schedule .sch_li .sch_it:hover .pack , .tbl_schedule .sch_li .sch_it:focus .pack {opacity:1; visibility:visible; transition:all 0.5s;} } @media (max-width: 1000px) { .tbl_schedule_section .sch_li .sch_it {padding-top:3em;} .tbl_schedule_section .sch_li .sch_it .code {left:15px; right:inherit;} } @media (max-width: 768px) { .schedule .grade_info {padding:0;} .schedule .grade_info .grade_tit {font-size:16px; } .schedule .grade_info .grade_tit a { padding:12px 16px;} .schedule .grade_info .grade_dls {flex-direction:column; padding:20px; gap:20px;} .schedule .grade_info .grade_dls dl {width:100%; min-width:100%;} .schedule .grade_info .gvinfo_box {padding:20px;} .schedule .grade_info .gvinfo_box .btnbox { width:80%; padding:0 0 0 10px; position:relative;bottom:none;left:none; right:none;} .select-custom.custom-sel-fliter .select-styled {width:auto; max-width:100%;} .select-custom.custom-sel-fliter .select-list {left:0; max-width:60vw;} .tbl_schedule .sch_li .sch_it.blank_wrap, .sch_it_blank {display:none;} .tbl_schedule_top {flex-flow:column; align-items: start; gap:1em} .tbl_schedule_top h3.tit_schedule {font-size:22px} .sch_3depth_wrap .select-custom .select-styled {font-size:1em;} .tbl_schedule .sch_li {padding:10px 0;border-bottom:0; border-top:none;} .tbl_schedule .sch_li .sch_it {display:flex;align-items: center;width:100%;height:auto;float:none;gap: 0.5ex;padding: 1em 0ex;border: none;border-bottom:1px solid #eaeaea} .tbl_schedule .sch_li .sch_it .film_tit {display:flex;/* font-size: 10px; */width:100%;align-items: flex-start;gap: 1ex;} .tbl_schedule .sch_li .sch_it .code {top: 0;left: 0;right: inherit;;position: relative;/* aspect-ratio: 1 / 1; */display: flex;justify-content: center;align-items: center;/* border-radius: 6px; *//* top: unset; *//* right: unset; */} .tbl_schedule .sch_li .sch_it .grade {position: relative;top: unset;right: 0;left: inherit;bottom: unset;width: auto;justify-content: flex-end;text-align: right;padding: 0;} .tbl_schedule .sch_li .sch_li_tit {width:100%;padding:15px 10px;background: #000;color: #fff;border-radius: 0;border-color: #000;line-height: 1;} /* 묶음 상영 모바일 */ .tbl_schedule .sch_li .sch_it .pack .film_tit_kor {color:#222;text-decoration:underline} .tbl_schedule .sch_li .pack {left:0; right:0; width:70%; transform:translateX(0);} .tbl_schedule .sch_li .pack .pack_list, .tbl_schedule .sch_li .pack .pack_list li a { color:#fff;} .tbl_schedule .sch_li .sch_it .film_tit .film_tit_kor {margin:0;font-size: 15px;line-height: 1.3;} .tbl_schedule .sch_li .sch_it .film_tit_bdl .ico_bundle, .tbl_schedule .sch_li .sch_it .film_tit .film_tit_kor .ico_bundle {vertical-align:middle;} .schedule_hd .sch_2depth {margin-top:15px;} .schedule_tab_sec .sch_2depth {overflow-x:scroll} .schedule_tab_sec .sch_2depth li {white-space:nowrap;float:none;display:table-cell;} .schedule_tab_sec .sch_2depth li a {font-size:15px;} .schedule_hd .sch_2depth li a .date {font-size:30px;} .tbl_schedule .sch_li .sch_it .time {font-size: 15px;line-height: 1.3;} .tbl_schedule .sch_li .sch_it .code {font-size:12px;} .tbl_schedule .sch_li .sch_it .film_tit_bdl {cursor:pointer;} .tbl_schedule .sch_li .sch_it .film_tit_kor {font-size:15px;line-height:1.3; word-break: break-all;} .tbl_schedule_section .sch_li .sch_it {flex-flow:column; align-items: flex-start;} .tbl_schedule_section .sch_li .sch_it .film_tit {flex-wrap:wrap; gap:0 1ex;} .tbl_schedule_section .sch_li .sch_it .film_tit_bdl {width:100%; margin-top:0.5ex} .tbl_schedule_section .sch_li .sch_it .grade {position:absolute;} .tbl_schedule .sch_li .sch_it .film_tit_kor.on, .tbl_schedule .sch_li .sch_it .film_tit_bdl.on {color:#ce1e36} .tbl_schedule .sch_li .sch_it .film_tit_kor.on i, .tbl_schedule .sch_li .sch_it .film_tit_bdl.on i {filter: invert(1);} .tbl_schedule .sch_li .pack.show { opacity: 1; visibility: visible; transition: all 0.5s;} .schedule .caution_box .row {flex-flow:column; gap:1em;} .schedule .caution_box .row:before, .schedule .caution_box .row:after {display:none;} .schedule .caution_box .tit-sec {font-size:17px;} .schedule .caution_box .list_secondary li {font-size:14px;} } @media (max-width: 480px) { .schedule_hd {padding:16px 0} .schedule_hd .sch_1depth li a {font-size:14px;padding:4px 10px} .schedule_hd .sch_2depth {margin-top:8px} .schedule_hd .sch_2depth li a .date {font-size:28px;} .schedule_tab_sec .sch_2depth li {padding:0 6px} .schedule_tab_sec .sch_2depth li a {font-size:15px;letter-spacing:-0.5px;} .select-custom.custom-sel-fliter .select-styled:after {right:0} .custom-sel-fliter {margin-left:3px} .chk_gv .chk-primary input[type=checkbox] + label {font-size:13px;letter-spacing:-0.5px} .chk_gv .chk-primary input[type=checkbox] + label span {width:20px;height:20px;background-size:8px;margin-right:6px} .schedule .grade_info ul li {font-size:13px;color:#666666;margin-right:2px} .schedule .grade_info .gvinfo_box {margin:20px 0 0 10px } .schedule .grade_info .gvinfo_box .gvtitle {font-size:15px; } .schedule .grade_info .gvinfo_box ul {padding:0 0;margin:10px 0 10px;} .schedule .grade_info .gvinfo_box ul li {position:relative;font-size:13px;line-height:1.5;color:#666; margin-top:5px;padding-left:15px;letter-spacing:-0.5px;font-weight:400} .schedule .grade_info .gvinfo_box ul li:before {content:'';display:inline-block;width:5px;height:1px;background:#999; position:absolute;top:10px;left:3px;} .tbl_schedule_top {padding:6px 0 10px} .tbl_schedule_top h3.tit_schedule {font-size:18px} .sch_select_wrap .select-custom .select {width:180px;height:40px;font-size:15px} .sch_select_wrap .select-custom .select-styled {line-height:40px;height:40px;} .sch_select_wrap .select-custom .select-styled:after {top:16px;right:12px} .sch_select_wrap .select-custom .select-styled:after {top:16px;right:12px} .sch_3depth_wrap .select-custom .select-list li a {font-size:1em;} .tbl_schedule .sch_li .sch_li_tit {font-size:15px;/* border:1px solid #e0e0e0; *//* margin-bottom:10px; */padding:8px 6px;/* line-height: 1; */} .tbl_schedule .sch_li .sch_it {flex-flow:column; align-items:flex-start;} .tbl_schedule .sch_li .sch_it .film_tit_eng {font-size:13px;display:none} .tbl_schedule_section .sch_li .datetime {font-size:15px;margin-top:8px} .tbl_schedule_section .sch_li .theater {font-size:13px;line-height:1.4;margin-top:5px;letter-spacing:-1px} .tbl_schedule .sch_li .sch_it .grade {position:absolute;/* margin-top:4px; *//* left:8px; */} .tbl_schedule .sch_li .sch_it .film_tit .pack .film_tit_kor {font-size:13px;font-weight:400} .tbl_schedule .sch_li .sch_it .time {position:absolute; top: -1.45em; left: 2.6em;} .tbl_schedule .sch_li .sch_it .code_btn {pointer-events: none;} } /* ------------------------------------------------------------------------------------------------------------------------------------------------ END ) 상영시간표(schedule > date.asp, theater.asp, section.asp) ------------------------------------------------------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------ 탭메뉴 ------------------------------------------------ */ .con_hd .pg_sec_list {margin-top:20px} .con_hd .pg_sec_list:before, .con_hd .pg_sec_list:after {display:block;content:'';clear:both} .con_hd .pg_sec_list li {position:relative;float:left;} .con_hd .pg_sec_list li:after {content:'';position:absolute;top:6px;right:0;display:inline-block;width:1px;height:15px;background:rgba(255,255,255,.2);} .con_hd .pg_sec_list li:last-child:after {content:none} .con_hd .pg_sec_list li a {display:block;font-size:16px;font-weight:300;line-height:1.6;padding-left:12px;padding-right:12px;color:#fff;opacity:0.8} .con_hd .pg_sec_list li a:hover, .con_hd .pg_sec_list li a.current {opacity:1} .con_hd .pg_sec_list li:first-child, .con_hd .pg_sec_list li:first-child a {padding-left:0} .con_hd .btn_sec_trailer {display:block;width:90px;height:90px;position:absolute;top:0;right:80px;bottom:0;margin:auto auto; background:url(/kor/img/cont/program/btn_play_trailer.png) no-repeat 0 0;opacity:0.8} .con_hd .btn_sec_trailer:hover {opacity:1} @media (max-width:1024px){ .con_hd .txt_box {padding:0 16px;text-align:center} .con_hd .txt_box h3 {font-size:26px;} .con_hd .btn_sec_trailer {right:20px;bottom:20px;top:auto;background-size:45px;width:45px;height:45px;opacity:1} .con_hd .pg_sec_list {text-align:center} .con_hd .pg_sec_list li {float:none;margin:2px 1px;padding:0;background:rgba(0,0,0,.2)} .con_hd .pg_sec_list li:after {content:none} .con_hd .pg_sec_list li a {padding:3px 8px;font-size:13px} .con_hd .pg_sec_list li:first-child a {padding-left:8px} .con_hd .pg_sec_list li:first-child {} }