/* default.css is loaded explicitly before this stylesheet. */ @charset "utf-8"; /* Mingky leftovers: keep dialogs hidden until JS shows them */ .modal-overlay[hidden], #toast-message[hidden], .modal-overlay:not(.is-open), #toast-message:not(.is-open) { display: none !important; } h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0;border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } .mobile { display:none !important; } .list_mobile_banner { display:none; } .list_banner { float: left; position:relative; width:100%; text-align:center; padding:10px 3px; } .list_banner img { width:100%;} .layer-open { overflow:hidden; position: fixed; width: 100%;} body { background:#1C1C21; color:#fff; } .wrap { position:relative; width:100%; z-index:10; } .one_ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; font-family: 'Apple SD Gothic Neo', Malgun Gothic, '맑은 고딕', "돋움", Dotum, Verdana, Arial, helvetica, clean, sans-serif;} .two_ellipsis { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height:44px; font-family: 'Apple SD Gothic Neo', Malgun Gothic, '맑은 고딕', "돋움", Dotum, Verdana, Arial, helvetica, clean, sans-serif;}/*min-height:50px; */ .three_ellipsis { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; min-height:50px; font-family: 'Apple SD Gothic Neo', Malgun Gothic, '맑은 고딕', "돋움", Dotum, Verdana, Arial, helvetica, clean, sans-serif;}/*min-height:50px; */ .table-ellipsis { display: table; table-layout: fixed; width: 100%; white-space: nowrap; font-family: 'Apple SD Gothic Neo', Malgun Gothic, '맑은 고딕', "돋움", Dotum, Verdana, Arial, helvetica, clean, sans-serif;} .table-ellipsis > * { display: table-cell; overflow: hidden; text-overflow: ellipsis; } .pointer { cursor:pointer; } .ellipsis_auto_height { min-height:auto ; } /* s 상단 메뉴 관련 */ .top_wrap { position:relative; width:100%; background:#16161A; border-bottom:1px solid #25252A; } .top_wrap .logo { -webkit-flex: none; flex: none; width:160px; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content: center; } .top_wrap .logo img { width:80%; } .top_wrap .gnb { font-size:18px; font-weight:300; position:relative; -webkit-flex:1; flex:1; display:-webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } .top_wrap .gnb a { padding:0 15px; } .top_wrap .gnb a.on { font-size:18px; color:#F83D3D; font-weight:500; } .top_wrap .search_wrap { position:relative; display: -webkit-flex; display:flex; width:200px; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; margin-right:5px; } /*수정됨*/ .top_wrap .search_wrap form { display: flex; align-items: center; min-width: 100px; max-width:220px; width:100%; } .top_wrap .search_wrap .search { background:#16161A; color:#bbb; width:200px; height:36px; font-size: 16px; border:1px solid #3F3F46; border-radius:20px; outline: none; padding:0 50px 0 18px; } .top_wrap .search_wrap .search:focus { border:1px solid #BBB; } /**추가*/ .top_wrap .search_wrap .btn_search { position: absolute; border:0px; right:0; width:50px; height:36px; border-radius:20px; outline: none; background: url('/theme/movie/img/main/icon_search.png') no-repeat 18px; } .top_wrap .login_wrap { position:relative; -webkit-flex: none; flex: none; width:42px; display:-webkit-flex; display:flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } .top_wrap .login_wrap .btn_login { width:36px; height:36px; line-height:32px; border:1px solid #3F3F46; border-radius:50%; background: #16161A url('/theme/movie/img/main/icon_person.png') no-repeat center; text-align:center; } .top_wrap .login_wrap .btn_login:hover { border:1px solid #BBB; } .top_wrap .login_wrap .btn_login.on { background:#F83D3D; border-color:#F83D3D; } /* e 상단 메뉴 관련 */ /* s 비쥬얼 관련 */ .visual_wrap { overflow:hidden; position:relative; width:100%; height:300px; background:url('/theme/movie/img/main/img_visual_bg_01.png') no-repeat center center; } .visual_wrap .banner_01 { position: absolute; left:50%; margin-left:-600px; } /* 1200 / 2 */ .visual_wrap .banner_02 { position: absolute; right:50%; margin-right:-600px; } /* 1200 / 2 */ .visual_wrap .banner_03 { position: absolute; right:50%; margin-right:-600px; top:142px } /* 1200 / 2 */ .m_visual_wrap { position:relative; width:100%; } .m_visual_wrap .item { height:200px; overflow:hidden; background-repeat:no-repeat; background-position: center; } /* e 비쥬얼 관련 */ /* s 컨텐츠 */ .contents_wrap { position:relative; width:100%; overflow-x:hidden; } .contents { position:relative; width:1280px; max-width:100%; margin:0 auto; padding:10px 0; border-bottom:1px solid #25252A; box-sizing:border-box; overflow-x:hidden; } h1 { position:relative; font-size:22px; font-weight:500; line-height:34px; margin:10px 0px 10px 0px; } h2 { position:relative; font-size:22px; font-weight:500; line-height:60px; margin:0; } h2 span { width:16px; height:16px; background:url('/theme/movie/img/main/icon_title_right_arrow.png') no-repeat center 1px; padding-left:30px; }/* 느낌상 1px 오차*/ h3 { font-size:16px; line-height:22px; font-weight:400; margin:0 0 5px 0; color:#fff; } h3 a { color:#fff !important; } /*h3 > a:link:before { color:blue; content: " " url('/theme/movie/img/main/icon_title_right_arrow.png'); } h3 > a:visited:before { color:red; content: " " url('/theme/movie/img/main/icon_ep.png'); } */ .paging_wrap { position:relative; width:1200px; margin:0 auto; padding:20px 3px; overflow:auto; text-align:center; } .paging_wrap .btn_more { width:100%; border:1px solid #25252A; background-color:transparent; color:#fff; font-size:16px; line-height:50px; } .paging_wrap .btn_more:hover { color:#EA3B3B; } .paging_wrap span { padding:8px 15px; display:inline-block; border-radius:3px; } .paging_wrap .paging_prev { background:transparent; border:0; cursor:pointer; padding:8px 15px; } .paging_wrap .paging_next { background:transparent; border:0; cursor:pointer; padding:8px 15px; } /*새로 추가*/ .m_paging_wrap { padding:20px 3px; } .m_paging_wrap .m_paging_content { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } .m_paging_wrap .paging_prev { background:transparent; border:0; cursor:pointer; padding:8px 15px; } .m_paging_wrap .paging_next { background:transparent; border:0; cursor:pointer; padding:8px 15px; } .m_paging_wrap .num_box { border:1px solid #25252A; background-color:transparent; border-radius:5px; padding:8px 10px; color:#7F7F7F; input { field-sizing: content; } } .m_paging_wrap .input_paging { border:0; background-color:transparent; color:#fff; white-space: nowrap; font-weight:500; padding:0 5px; } .m_paging_wrap .input_paging_end { border:0; background-color:transparent; color:#7F7F7F; white-space: nowrap; padding:0 5px; cursor:pointer; } /*e새로 추가*/ .list_option { position: relative; top: -33px; right: 0px; } .list_vertical { display: table; border-collapse:collapse; width:100%; margin-left:0; } .list_vertical .item { float: left; position:relative; width:calc(100% / 4); padding:6px; } /*.list_vertical .item .inner { border:1px solid #25252A; }*/ .list_vertical .item_img { position:relative; width:100%; padding-top: calc(9 / 16 * 100%); aspect-ratio: 16 / 9; overflow:hidden; border-radius: 8px;} .list_vertical .item_img .thumb { position:absolute; top: 50%; left: 50%; width:100%; height:100%; transform: translate(-50%, -50%); object-fit:cover; } .list_vertical .list_area { display: block; position:relative; padding:10px 0 0px 0; width:100%;} .list_contents a { color:#bbb; } .list_horizontal { display: table; border-collapse:collapse; width:100%; } .list_horizontal .item { display: table-row; position:relative; } .list_horizontal .item_img { position:relative; display: table-cell; vertical-align: middle; width:35%; height:82px; } .list_horizontal .item .inner { padding:0 3px 10px 3px; } .list_horizontal .item_img .thumb { position:absolute; display: block; top: 50%; left: 50%; width:100%; height:100%; aspect-ratio: 16 / 9;transform: translate(-50%, -50%); object-fit:cover; border-radius: 8px;} .list_horizontal .list_area { display: table-cell; vertical-align:top; width:45%; padding:0 0 0 10px; } .list .item_img { width:25%; height:100px; } .list .list_area { width:75%; } .same .item_img { /* width:55%;*/ min-width:120px; aspect-ratio: 16 / 9; } .same .list_area { width:45%; min-width:120px; } .popular { float: left; position:relative; width:50%; padding-right:5px; } .genre { float: left; position:relative; width:50%; padding-left:5px; height:480px; overflow:hidden; } .genre .genre_text { position:absolute; right:25px; top:1px; line-height:60px; font-size:18px; } .nano { position:relative; width:100%; height:410px; } .nano > .nano-content { position:absolute; overflow: auto; overflow-x:hidden; top:0; right:0; bottom:0; left:0; } .nano > .nano-content:focus { outline:thin dotted; } .nano > .nano-content::-webkit-scrollbar { display:none; } .has-scrollbar > .nano-content::-webkit-scrollbar { display:block; } .nano > .nano-pane { background:rgba(22,22,26,1); position:absolute; width:10px; right:0; top:0; bottom:0; visibility:hidden\9; opacity:.01; -webkit-transition:.2s; -moz-transition:.2s; -o-transition:.2s; transition:.2s; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } .nano > .nano-pane > .nano-slider { background:#000; background:rgba(244,57,70,1); position:relative; margin:0 1px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; } .nano:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed { visibility:visible\9; opacity:0.99; } .floating_delete { position: absolute; right:5px; top:5px; } .floating_delete .btn_del { color:#fff; line-height:25px; background:#F83D3D; font-weight:700; padding:0 8px; font-size:12px; border-radius:3px; } .floating_delete .btn_del a { padding:0 0 0 18px; background:url('/theme/movie/img/main/icon_del.png') no-repeat left #F83D3D; background-size:13px; } .floating_platform { position: absolute; right:5px; top:5px;} .floating_platform span { display: inline-block;} .floating_platform img { height:15px; border-radius:3px;} .floating_cc { position: absolute; right:5px; top:5px; border-radius:3px; background: rgba(0,0,0,.6);} .floating_cc span { display: inline-block;} .floating_cc img { height:24px; border-radius:3px; padding: 0px 2px 0px 2px;} .item_time { color:#F83D3D; line-height:25px; font-weight:700; padding:0 8px 0 23px; font-size:12px; border-radius:3px; background: #fff url('/theme/movie/img/main/icon_time.png') no-repeat 5px 5px; } .floating_age { position: absolute; right:5px; top:5px; } .item_age { color:#fff; line-height:25px; background:#F83D3D; font-weight:700; padding:0 8px; font-size:12px; border-radius:3px; } .item_recommended { line-height:25px; border-radius:3px; padding:0 8px; border-radius:3px; } .rainbow { background: linear-gradient(-45deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%); } .yellow { background:#FFD800 !important; } .blue { background:#3F5FFF !important; } .red { background:#F63B42 !important; } .green { background:#3EC54A !important; } /*추가*/ .f_red { color:#F63B42 !important; } .floating_like { position: absolute; left:5px; top:5px; } .floating_category { position: absolute; left:5px; bottom:5px; } .floating_category span { background:#fff; color:#16161A; font-weight:700; line-height:19px; padding:0 8px; font-size:11px; border-radius:3px; display: inline-block; } .floating_category span a { outline:none; text-decoration: none; color:#16161A; } .floating_category span a:focus, a:hover { outline:none; color:#16161A; } .floating_category span a:active { outline:none; text-decoration:none; color:#16161A; } .ep { width:100%; color:#bbb; padding:0 0 15px 20px; font-size:13px; border-radius:3px; background:url('/theme/movie/img/main/icon_ep.png') no-repeat left 2px; } .author { width:100%; color:#bbb; padding:0 50px 8px 20px; font-size:13px; line-height:18px; background:url('/theme/movie/img/main/icon_person.png') no-repeat left 0px; background-size:12px 15px; margin:0; } .author a { color:#bbb; } .video-title { font-size: 1.0em; } .datetime { display:inline-block; max-width:200px; color:#bbb; font-size:13px; padding:0 3px 0 18px; background:url('/theme/movie/img/main/icon_b_date.png') no-repeat left; background-size:13px 13px; } .view { display:inline-block; max-width:70px; color:#bbb; font-size:13px; padding:0 3px 0 17px; background:url('/theme/movie/img/main/icon_view.png') no-repeat left; background-size:13px 13px; float:right; margin-left: 5px; } .info_area { display: block; position:relative; padding:10px 0 10px 0; width:100%;} .s_bookmark { display:inline-block; max-width:70px; color:#bbb; font-size:13px; padding:0 3px 0 15px; background:url('/theme/movie/img/main/icon_s_bookmark.png') no-repeat left; background-size:13px 13px; float: right; margin-left: 5px; } .s_bookmark_active { display:inline-block; max-width:70px; color:#bbb; font-size:13px; padding:0 3px 0 15px; background:url('/theme/movie/img/main/icon_s_bookmark_active.png') no-repeat left; background-size:13px 13px; float: right; margin-left: 5px; } .like { display:inline-block; max-width:70px; color:#bbb; font-size:13px; padding:0 3px 0 18px; background:url('/theme/movie/img/main/icon_like.png') no-repeat left; background-size:13px 13px; float: right;} .like_active { display:inline-block; max-width:70px; color:#bbb; font-size:13px; padding:0 3px 0 18px; background:url('/theme/movie/img/main/icon_like_active.png') no-repeat left; background-size:13px 13px; float: right;} .comment { display:inline-block; max-width:50px; color:#bbb; font-size:13px; padding:0 3px 0 20px; background:url('/theme/movie/img/main/icon_comment.png') no-repeat left; background-size:16px 15px; } /*.s_bookmark { display:inline-block; max-width:45px; color:#bbb; font-size:13px; padding:0 3px 0 20px; background:url('/theme/movie/img/main/icon_s_bookmark.png') no-repeat left; background-size:16px 15px; }*/ /*.like { display:inline-block; max-width:45px; color:#bbb; font-size:13px; padding:0 3px 0 20px; background:url('/theme/movie/img/main/icon_like.png') no-repeat left; background-size:16px 15px; }*/ .s_share { display:inline-block; max-width:45px; color:#bbb; font-size:13px; padding:0 3px 0 23px; background:url('/theme/movie/img/main/icon_s_share.png') no-repeat left; background-size:18px 15px; } .date { color:#999; font-size:15px; } .btn_blank { color:#bbb; background:#1C1C21; position: absolute; right:10px; bottom:12px; font-size:13px; border:1px solid #3F3F46; border-radius:3px; padding:2px 10px; } .btn_blank:hover { color:#fff; font-weight:500; background:#F83D3D; border:1px solid #F83D3D; } p a { color:#bbb; } .column_9 { -moz-column-count:9; -moz-columns:9; -webkit-columns:9; columns:9; } .column_10 { -moz-column-count:10; -moz-columns:10; -webkit-columns:10; columns:10; gap: 0 ; } .tab { position:relative; } .tab > ul { position:relative; list-style:none; overflow:hidden; padding:0 3px; } .tab > ul > li { display:inline-block; float:left; font-size:16px; cursor:pointer; min-width:65px; background:url('/theme/movie/img/main/dot.png') no-repeat 51px 6px; margin-bottom:18px; -webkit-transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; -ms-transition:all 0.1s ease-in-out; transition:all 0.1s ease-in-out; } .tab > ul > li:nth-last-child(1) { background:url(''); } .tab > ul > li.active { color:#F83D3D; font-weight:700; } .tab .conBox { position: relative; display:none; width:100%; } .tab .conBox.active { display:block; animation: fadein 2s; -moz-animation: fadein 2s; -webkit-animation: fadein 2s; -o-animation: fadein 2s; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } .day_menu { border-top:1px solid #25252A; border-bottom:1px solid #25252A; } .day_menu a { color:#bbb; } .day_menu span { display:block; } .day_menu .menu { width:1200px; margin:0 auto; text-align:center; font-size:18px; line-height:60px; color:#bbb; } .day_menu .menu .active { background:#F83D3D; font-weight:500; color:#fff; } .category_menu { position:relative; width:100%; float: left; position:relative; margin-top:10px; } .category_menu a { color:#bbb; } .category_menu span { display:block; } .category_menu ul { width:1200px; margin:0 auto; overflow: auto; } .category_menu ul li { float: left; background:#16161A; color:#bbb; font-size:16px; line-height:40px; text-align:center; margin:5px 5px 0 0; padding:0 15px; border-radius:3px; } .category_menu .active { background:#F83D3D; font-weight:500; color:#fff; } .platform_menu { position:relative; width:100%; float: left; position:relative; margin-top:10px; } .platform_menu a { color:#bbb; } .platform_menu span { display:block; padding:0 15px; } .platform_menu ul { width:1200px; margin:0 auto; background:#16161A; overflow: auto; border-radius:3px; padding:10px 15px; } .platform_menu ul li { float: left; color:#bbb; font-size:16px; background:#1C1C21; line-height:40px; text-align:center; margin:5px 5px 5px 0; border-radius:3px; } .platform_menu .active { background:#F83D3D; font-weight:500; color:#fff; padding:0 15px; } .platform_menu img { width:25px; border-radius:3px; } .sort { position: absolute; top: -3px; right: 6px; list-style:none; overflow:hidden; } .sort > li { position:relative; display:inline-block; font-size:16px; cursor:pointer; text-align:right; padding-left:20px; } .sort > li .dot { position: absolute; top:7px; left:5px; background:url('/theme/movie/img/main/dot.png') no-repeat; width:10px; height:10px; } .sort > li.active > a { color:#F83D3D; font-weight:700; } .recent_more { display:block; } .list_type { display:none; } .detail_wrap { position:relative; width:100%; min-height:200px; background:#1C1C21; border-bottom:1px solid #25252A; padding: 0; }/*수정됨*/ .detail_grid { display: grid; grid-template-columns: 3fr 1fr; gap: 10px; margin-top: 20px;}/*수정됨*/ .detail_grid .item { position:relative; overflow: hidden; } .detail_grid .detail_img { position:relative; padding-top:0%; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } .detail_grid .title { font-size:25px; line-height:40px; margin-bottom:5px; margin-top:15px; }/*수정됨*/ /*수정됨 및 추가*/ .info_content { border-top:1px solid #25252A; padding-top:18px; color:#999;} .info_content .content { overflow: hidden; position: relative; } .info_content .more-btn { margin:20px 0 10px 0; text-align: center;} .info_content .more-btn a:after { content:"더보기"; } .info_content.more .more-btn a:after { content:"접기"; } .info_content .content .txt { white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; word-wrap:break-word; } .info_content .content .txt.fake { opacity: 0; position:absolute; display:block; } .info_content.more .content .txt { display:block; } .detail_grid li span { background:#fff;color:#16161A;font-weight:700;line-height: 26px;padding: 0 8px;font-size:15px;border-radius:3px;display: inline-block;margin-right: 12px;margin-top: 16px; } /* e 수정됨*/ .detail_grid .detail_btn_box { display: grid; grid-template-columns: repeat(3, 1fr); gap:0 5px; border-top:1px solid #25252A; padding:18px 0 18px 0; margin-top:0px; } .btn_bookmark { position:relative; font-size:15px; width:100%; background:transparent; border:1px solid #3F3F46; border-radius:3px; color:#fff; height:50px; } .btn_bookmark:before { position: absolute; top:50%; left:50%; margin-left:-45px; margin-top:-10px; display: inline-block; width:17px; height:18px; background:url('/theme/movie/img/main/icon_bookmark.png') no-repeat; content: ""; } .btn_bookmark:hover { border:1px solid #F83D3D; background-color: transparent; } .btn_like { position:relative; font-size:15px; width:100%; background:transparent; border:1px solid #3F3F46; border-radius:3px; color:#fff; height:50px; } .btn_like:before { position: absolute; top:50%; left:50%; margin-left:-50px; margin-top:-10px; display: inline-block; width:22px; height:18px; background:url('/theme/movie/img/main/icon_like_list.png') no-repeat; content: ""; } .btn_like:hover { border:1px solid #F83D3D; background-color: transparent; } .btn_report { position:relative; font-size:15px; width:100%; background:transparent; border:1px solid #3F3F46; border-radius:3px; color:#fff; height:50px; } .btn_report:before { position: absolute; top:50%; left:50%; margin-left:-50px; margin-top:-10px; display: inline-block; width:22px; height:18px; background:none no-repeat; content: ""; } .btn_report:hover { border:1px solid #F83D3D; background-color: transparent; } .btn_default { font-size:15px; width:100%; background-color: transparent; border:1px solid #3F3F46; border-radius:3px; color:#fff; height:50px; } .btn_default:hover { border:1px solid #F83D3D; } .detail_btn_box .active { background:#F83D3D; border:1px solid #F83D3D; color:#fff; } .ep_contents { float: left; width:100%; position:relative; } /*수정됨*/ .category_contents { margin-left: 70%; } .ep_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); gap:10px 0; } .ep_grid .item { position:relative; overflow:auto; border-bottom:1px solid #25252A; padding-bottom:10px; } .ep_grid .item_img { float: left; border:1px solid #25252A; position:relative; padding-top:12%; width:20%; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } .ep_grid .list_contents { margin-left: 20%; position:relative; overflow:auto; padding:0 10px; } .ep_grid .list_contents .title { font-size:20px; line-height:30px; } .ep_grid .list_contents .date { color:#999; font-size:15px; } .category_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap:10px 0; } .category_grid .item { position:relative; overflow:auto; } .category_grid .item_img { float: left; border:1px solid #25252A; position:relative; padding-top:20%; width:40%; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } .category_grid .list_contents { margin-left: 40%; position:relative; overflow:auto; padding:0 10px; } .category_grid .list_contents .title { font-size:16px; line-height:30px; } .border_clear { border:0 !important; } /* e 컨텐츠 */ /* s 뷰 컨텐츠 */ .view_top_wrap { position: fixed; z-index:10; width:100%; background:#16161A; border-bottom:1px solid #25252A; display:-webkit-flex; display:flex; height:60px; } .view_top_wrap .btn_back { -webkit-flex: none; flex: none; width:60px; background:url('/theme/movie/img/main/btn_back.png') no-repeat center; border-right:1px solid #25252A; } .view_top_wrap .btn_back:hover { background: #F83D3D url('/theme/movie/img/main/btn_back.png') no-repeat center; } .view_top_wrap ul { margin-left:20px; padding:3px; -webkit-flex:1; flex:1; min-width: 0; } .view_top_wrap .title { font-weight:500; line-height:30px; font-size:16px; } .view_top_wrap .total { color:#bbb; font-size:13px; line-height:15px; } .view_top_wrap .btn_view_bookmark { position:relative; -webkit-flex:none; flex:none; width:100px; line-height:55px; text-align:center; border-left:1px solid #25252A; padding-left:20px; } .view_top_wrap .btn_view_bookmark:before { position: absolute; top:50%; left:50%; margin-left:-35px; margin-top:-13px; display: inline-block; width:22px; height:18px; background:url('/theme/movie/img/main/icon_bookmark.png') no-repeat; content: ""; } .view_top_wrap .btn_view_like { position:relative; -webkit-flex:none; flex:none; width:100px; line-height:55px; text-align:center; border-left:1px solid #25252A; padding-left:20px; } .view_top_wrap .btn_view_like:before { position: absolute; top:50%; left:50%; margin-left:-35px; margin-top:-13px; display: inline-block; width:22px; height:18px; background:url('/theme/movie/img/main/btn_like_default.png') no-repeat; background-size:22px 18px; content: ""; } .view_top_wrap .active { background: #F83D3D; } .view_bottom_wrap { position: fixed; z-index:10; width:100%; background:#16161A; border-top:1px solid #25252A; display:-webkit-flex; display:flex; height:60px; bottom:0; } .view_bottom_wrap ul { width:100%; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; } .view_bottom_wrap ul li { position:relative; display: inline-block; line-height:60px; font-size:16px; padding: 0 30px; } .view_bottom_wrap .prev span { position: absolute; background:url('/theme/movie/img/main/btn_left.png') no-repeat center; width:30px; height:16px; left:-5px; top:20px; } .view_bottom_wrap .list { border-right:1px solid #25252A; border-left:1px solid #25252A; } .view_bottom_wrap .list.color { color:#F83D3D; font-weight:700; } .view_bottom_wrap .next span { position: absolute; background:url('/theme/movie/img/main/btn_right.png') no-repeat center; width:30px; height:16px; right:-5px; top:20px; } .view_bottom_wrap ul li:hover { color:#F83D3D; font-weight:700; } .view_contents { position:relative; width:800px; margin:0 auto; margin-top:40px; } .view_contents img { position:relative; width:100%; } .prev_next_wrap { position:relative; width:800px; margin:0 auto; margin-top:30px; } .prev_next_contents { position:relative; overflow:auto; display: -webkit-flex; display: flex; border-bottom:1px solid #25252A; margin:10px 0; padding-bottom:10px; } .prev_next_contents .item_img { position:relative; padding-top:12%; width:22%; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } .prev_next_contents .list_contents { -webkit-flex: 1; flex: 1; } .prev_next_contents .list_contents dl { min-height:100px; display: -webkit-flex; display:flex; -webkit-align-items: center; align-items: center; } .prev_next_contents .list_contents dt { display: inline-block; } .prev_next_contents .list_contents .s_title { color:#bbb; padding:0 50px; } .prev_next_contents .list_contents .title { font-size:18px; } .bottom_view_wrap { position:relative; width:800px; margin:0 auto; padding:30px 0 0 0; display: -webkit-flex; display: flex; -webkit-flex: 1; flex: 1; gap:5px; text-align:center; } .bottom_view_bookmark { width:100%; } .bottom_view_bookmark { position:relative; font-size:16px; width:100%; background-color: transparent; border:1px solid #3F3F46; border-radius:3px; color:#fff; font-weight:500; line-height:50px; min-height:50px; } .bottom_view_bookmark:before { position: absolute; top:50%; left:50%; margin-left:-45px; margin-top:-11px; display: inline-block; width:17px; height:18px; background:url('/theme/movie/img/main/icon_bookmark.png') no-repeat; content: ""; } .bottom_view_bookmark:hover { border:1px solid #EA3B3B; } .bottom_view_like { width:100%; } .bottom_view_like { position:relative; font-size:16px; width:100%; background-color: #1C1C21; border:1px solid #3F3F46; border-radius:3px; color:#fff; font-weight:500; line-height:50px; min-height:50px; } .bottom_view_like:before { position: absolute; top:50%; left:50%; margin-left:-48px; margin-top:-11px; display: inline-block; width:22px; height:18px; background:url('/theme/movie/img/main/btn_like_default.png') no-repeat; background-size:22px 18px; content: ""; } .bottom_view_like:hover { border:1px solid #EA3B3B; } .bottom_view_wrap .active { background: #F83D3D; border:1px solid #F83D3D !important; border-radius:3px; font-weight:500; line-height:50px; min-height:50px; } .bottom_list_wrap { position: fixed; z-index:10; width:100%; background:#16161A; border-top:1px solid #25252A; display:-webkit-flex; display:flex; height:100px; bottom:-60px; transition: 0.2s all; padding:10px 0; } .bottom_list_wrap .item { height:80px; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } .bottom_list_wrap .item.active { border:3px solid #F83D3D; } .bottom_list_wrap.on { bottom:60px; } .bg_opacity { font-size:16px; font-weight:500; width:100%; height:100%; background-color: rgb(0 0 0 / 0.7); display: -webkit-flex; display:flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } .scrollTo_wrap { position: fixed; z-index:10; right:20px; bottom:170px; width:40px; } .scrollToTop { border:1px solid #25252A; background:#16161A url('/theme/movie/img/main/icon_scroll_top.png') no-repeat center; border-radius:3px; width:40px; height:40px; line-height:40px; margin-bottom:5px;} .scrollToBottom { border:1px solid #25252A; background:#16161A url('/theme/movie/img/main/icon_scroll_bottom.png') no-repeat center; border-radius:3px; width:40px; height:40px; line-height:40px; } /* e 뷰 컨텐츠 */ /* s 멤버 ***/ .member_wrap { width:600px; margin:0 auto; } .member_wrap .logo { width:120px; height:80px; background:url('/theme/movie/img/main/logo2.png') no-repeat left center; background-size:100%; margin:0 auto; } .member_wrap .title { position:relative; font-size:20px; line-height:50px; margin-top:20px; } .member_wrap .s_title { color:#bbb; font-size:14px; } .member_wrap .d_input { color:#bbb; width:100%; height:40px; font-size: 16px; border:1px solid #3F3F46; border-radius:3px; background:#16161A; padding:0 0 3px 10px; } .member_wrap .d_input:focus { border:1px solid #BBB; } .member_wrap .m_title { margin-top:20px; line-height:40px; font-size:16px; } .member_wrap .m_btn_login { margin-top:20px; position:relative; font-size:15px; width:100%; background:#F83D3D; border:1px solid #F83D3D; border-radius:3px; color:#fff; font-weight:500; line-height:50px; } .member_wrap .m_btn_register { margin-top:10px; font-size:15px; width:100%; background-color: transparent; border:1px solid #3F3F46; border-radius:3px; color:#fff; line-height:50px; } .member_wrap .m_btn_login:hover, .m_btn_register:hover { border:1px solid #F83D3D; background-color: transparent; color:#F83D3D; } .member_wrap .check { font-size:13px; color:#F83D3D; font-weight:300; } .member_layer { display: none; background:#1C1C21; position: absolute; right:10px; top:62px; z-index:12; padding:10px 20px; border:1px solid #25252A; font-size:15px; border-radius:3px; } .member_layer ul li { line-height:30px; } /* s 멤버 ***/ /*추가*/ /* .bottom_box { float: left; border-top:1px solid #25252A; width:100%; margin-top:50px; padding-top:30px; } .bottom_box ul { width:1200px; margin:0 auto; display: -webkit-flex; display: flex; } .bottom_box .n_list_box { -webkit-flex: initial; flex: initial; width:500px; min-width:270px; } .bottom_box .n_list_box dl { padding-right:10px; } .bottom_box .link_box { -webkit-flex: 1; flex: 1; } .bottom_box .title { color:#fff; font-size:18px; margin-bottom:5px; } .bottom_box a { outline:none; text-decoration: none; color:#777; line-height:26px; } .bottom_box a:focus { outline:none; color:#fff; } .bottom_box a:active,a:hover { outline:none; text-decoration:none; color:#fff; } */ .bottom_box { border-top: 1px solid #25252A; width: 100%; margin-top: 50px; padding-top: 30px; } .bottom_box > ul { max-width: 1200px; width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; } .bottom_box .n_list_box, .bottom_box .link_box { flex-grow: 0; flex-shrink: 0; box-sizing: border-box; } .bottom_box .n_list_box { width: 500px; min-width: 270px; } .bottom_box .link_box { flex: 1; min-width: 100px; } .bottom_box .title { color: #fff; font-size: 18px; margin-bottom: 5px; } .bottom_box a { outline: none; text-decoration: none; color: #777; line-height: 26px; } .bottom_box a:focus { outline: none; color: #fff; } .bottom_box a:active,a:hover { outline: none; text-decoration: none; color: #fff; } .bottom_box ul.normal-list { display: block; width: auto; margin: 0; padding: 0; list-style: none; white-space: normal; } .bottom_box ul.normal-list li { display: block; float: none; width: auto; white-space: normal; } /* s 하단사업자***/ .copyright_box { float: left; background: url('/theme/movie/img/main/copyright_bg.png') no-repeat top center; border-top:1px solid #25252A; width:100%; color:#777777; text-align:center; font-size:13px; padding:30px 10px; margin-top:30px; } .copyright_box .copy_logo { padding-top:6px; } /* s 모바일 */ .hamburger_position { position: absolute; top:22px; right:10px; z-index:12; } .hamburger { position:relative; padding: 10px 10px; display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; } .hamburger:hover { opacity: 0.7; } .hamburger.is-active:hover { opacity: 0.7; } .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after { background-color: #fff; } .hamburger-box { width:25px; height:16px; display: inline-block; position: relative; } .hamburger-inner { display: block; top: 50%; margin-top: -2px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 25px; height:2px; background-color: #BBBBBB; border-radius: 2px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -8px; } .hamburger-inner::after { bottom: -8px; } .hamburger--collapse .hamburger-inner { top: auto; bottom: 0; transition-duration: 0.13s; transition-delay: 0.13s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse .hamburger-inner::after { top: -16px; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; } .hamburger--collapse .hamburger-inner::before { transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse.is-active .hamburger-inner { transform: translate3d(0, -10px, 0) rotate(-45deg); transition-delay: 0.22s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--collapse.is-active .hamburger-inner::after { top: 0; opacity: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; } .hamburger--collapse.is-active .hamburger-inner::before { top: 0; transform: rotate(-90deg); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } /* e 모바일 */ /**/ .fsmenu_logo { width:100px; height:78px; margin-left:10px; display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content: center; } .fsmenu_logo img { width:100%; } .fsmenu { width: 100vw; height: 100vh; position:absolute; background: #16161A; top: 0; right: 0; bottom:0; left:0; z-index: 11; overflow: hidden; display: none; } .fsmenu .fsmenu--container { width:100%; height:80vh; padding:20px; background: #16161A; position: absolute; right: 0; overflow-y: auto; } .fsmenu .fsmenu--container .fsmenu--list { width: 100%; height: 100vh; } .fsmenu .fsmenu--container .fsmenu--list .fsmenu--list-element { width:100%; list-style-type:none; text-align:right; } .fsmenu .fsmenu--container .fsmenu--list .fsmenu--list-element a { width: 100%; height: 100%; text-decoration: none; color: #fff; display: flex; justify-content: flex-end; -webkit-transition: 0.2s ease; transition: 0.2s ease; } .fsmenu .fsmenu--container .fsmenu--list .fsmenu--list-element a:hover { color: #fff; } .fsmenu .fsmenu--container .fsmenu--list .fsmenu--list-element a span:hover { color:#fff; } .fsmenu .fsmenu--container .fsmenu--list .fsmenu--list-element a span { color:#888; font-size: 20px; font-weight: 500; line-height:50px; display: inline-block; position: relative; z-index: 11; } .fsmenu .fsmenu--container .fsmenu--list .fsmenu--list-element a span:before { content: ""; display: block; width: 100%; height: 100%; background: #F83D3D; position: absolute; left: 0; z-index: 11; } .fsmenu.is-active { display: block; -webkit-animation: animMenuReveal 0.6s cubic-bezier(0.13, 0.13, 0.02, 1.07) 0s forwards; animation: animMenuReveal 0.6s cubic-bezier(0.13, 0.13, 0.02, 1.07) 0s forwards; } .fsmenu.is-active .fsmenu--container .fsmenu--list .fsmenu--list-element a span:before { -webkit-animation: animMenuRevealLinks 0.4s cubic-bezier(0.13, 0.13, 0.02, 1.07) 0.4s forwards; animation: animMenuRevealLinks 0.4s cubic-bezier(0.13, 0.13, 0.02, 1.07) 0.4s forwards; } .fsmenu.close-menu { display: block; -webkit-animation: animMenuClose 0.6s cubic-bezier(0.13, 0.13, 0.02, 1.07) 0.3s forwards; animation: animMenuClose 0.6s cubic-bezier(0.13, 0.13, 0.02, 1.07) 0.3s forwards; } .fsmenu.close-menu .fsmenu--container .fsmenu--list .fsmenu--list-element a span:before { -webkit-animation: animMenuCloseLinks 0.4s cubic-bezier(0.13, 0.13, 0.02, 1.07) 0s forwards; animation: animMenuCloseLinks 0.4s cubic-bezier(0.13, 0.13, 0.02, 1.07) 0s forwards; } @-webkit-keyframes animMenuReveal { 0% { width: 0vw; } 100% { width: 100vw; } } @keyframes animMenuReveal { 0% { width: 0vw; } 100% { width: 100vw; } } @-webkit-keyframes animMenuRevealLinks { 0% { width: 100%; } 100% { width: 0%; } } @keyframes animMenuRevealLinks { 0% { width: 100%; } 100% { width: 0%; } } @-webkit-keyframes animMenuClose { 0% { width: 100vw; } 100% { width: 0vw; } } @keyframes animMenuClose { 0% { width: 100vw; } 100% { width: 0vw; } } @-webkit-keyframes animMenuCloseLinks { 0% { width: 0%; } 100% { width: 110%; } } @keyframes animMenuCloseLinks { 0% { width: 0%; } 100% { width: 110%; } } .owl-theme .owl-nav { position:relative; text-align:center; -webkit-tap-highlight-color: transparent; } .owl-theme .owl-nav [class*='owl-'] { color: #FFF; font-size: 14px; margin: 5px; padding: 4px 7px; background: #D6D6D6; display: inline-block; cursor: pointer; border-radius: 3px; } .owl-theme .owl-nav [class*='owl-']:hover { background: #869791; color: #FFF; text-decoration: none; } .owl-theme .owl-nav .disabled { opacity: 0.5; cursor: default; } .owl-theme .owl-nav.disabled + .owl-dots { margin-top: 10px; } .owl-theme .owl-dots { text-align: center; -webkit-tap-highlight-color: transparent; } .owl-theme .owl-dots .owl-dot { display: inline-block; zoom: 1; *display: inline; } .owl-theme .owl-dots .owl-dot span { width: 10px; height: 10px; margin: 5px 7px; background: #D6D6D6; display: block; -webkit-backface-visibility: visible; transition: opacity 200ms ease; border-radius: 30px; } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #869791; } .owl-carousel { display: none; width: 100%; -webkit-tap-highlight-color: transparent; position: relative; z-index: 1; } .owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; touch-action: manipulation; -moz-backface-visibility: hidden; } .owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .owl-carousel .owl-stage-outer { position: relative; overflow: hidden; -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-wrapper,.owl-carousel .owl-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); } .owl-carousel .owl-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .owl-carousel .owl-item img { /*width: 100%; */} .owl-carousel .owl-nav.disabled,.owl-carousel .owl-dots.disabled { display: none; } .owl-carousel .owl-nav .owl-carousel .owl-nav .owl-carousel .owl-dot { cursor: pointer; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel .owl-nav button.owl-prev,.owl-carousel .owl-nav button.owl-next,.owl-carousel button.owl-dot { background:none; color:inherit; border:none; padding: 0 !important; font:inherit; } .owl-prev,.owl-next { position: absolute; top:-42px; right:5px; } .owl-prev { right:20px; display: none; } .owl-next { } .owl-carousel.owl-loaded { display: block; } .owl-carousel.owl-loading { opacity: 0; display: block; } .owl-carousel.owl-hidden { opacity: 0; } .owl-carousel.owl-refresh .owl-item { visibility: hidden; } .owl-carousel.owl-drag .owl-item { -ms-touch-action: pan-y; touch-action: pan-y; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-grab { cursor: move; cursor: grab; } .owl-carousel.owl-rtl { direction: rtl; } .owl-carousel.owl-rtl .owl-item { float: right; } .no-js .owl-carousel { display: block; } .owl-carousel .animated { animation-duration: 1000ms; animation-fill-mode: both; } .owl-carousel .owl-animated-in { z-index: 0; } .owl-carousel .owl-animated-out { z-index: 1; } .owl-carousel .fadeOut { animation-name: fadeOut; } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .owl-height { transition: height 500ms ease-in-out; } .owl-carousel .owl-item .owl-lazy { opacity: 0; transition: opacity 400ms ease; } .owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) { max-height: 0; } .owl-carousel .owl-item img.owl-lazy { transform-style: preserve-3d; } .owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000; } .owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: none no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; transition: transform 100ms ease; }\ .owl-carousel .owl-video-play-icon:hover { -ms-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); } .owl-carousel .owl-video-playing .owl-video-tn, .owl-carousel .owl-video-playing .owl-video-play-icon { display: none; } .owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; transition: opacity 400ms ease; } .owl-carousel .owl-video-frame { position: relative; z-index: 1; height: 100%; width: 100%; } .right_position { position:relative; width:1200px; margin:0 auto; height:0; } .right_banner { position:absolute; right:-220px; top:320px; width:200px; z-index:11; } .right_banner img { width:200px; margin-bottom:5px; } /* s news_tiker */ .news_tiker { width:100%; margin:0 auto; background:#16161A; display:-webkit-flex; display:flex; border-bottom:1px solid #25252A; height:40px; overflow: hidden; } .news_tiker ul { -webkit-flex: 1; flex: 1; text-align:center; } .news_tiker ul li { line-height:40px; } .news_tiker ul li a { color:#bbb; } .news_tiker .list_type { display:none; -webkit-flex: none; flex: none; width:50px; line-height:40px; border-left:1px solid #25252A; text-align:center; } .btn_layer { color:#bbb; background:#1C1C21; font-size:13px; border:1px solid #3F3F46; border-radius:3px; line-height:20px; padding:2px 10px; margin-left:10px; } .btn_layer:hover { color:#fff; font-weight:700; background:#F63B42; border:1px solid #F63B42; } /* e news_tiker */ .btn_history_clean { margin-top:3px; float: right; color:#fff; background:#F63B42; font-size:13px; border-radius:3px; line-height:25px; padding:2px 10px; cursor: pointer; } /* 팝업 */ .today_popup { position:relative; display:none; font-size: 15px; position: fixed; top: 50%; left: 50%; z-index: 90000; min-width:320px; background:#000; } .today_popup ul { position:relative; } .today_popup ul li { position:relative; overflow: auto; } .today_popup .close_today_popup { float:right; padding:8px; cursor:pointer; } .today_popup .popup_checkbox_wrap { padding:5px 10px; background:#1C1C21; } /*비밀번호 레이어*/ #mask { display:none; background: #000; position: fixed; left: 0; top: 0; z-index: 12; width: 100%; height: 100%; opacity: 0.8; } .notice_nano { position:relative; width:100%; height:200px; border-bottom:1px solid #25252A; } .notice_nano > .nano-content { position:absolute; overflow: auto; overflow-x:hidden; top:0; right:0; bottom:0; left:0; } .notice_nano > .nano-content:focus { outline:thin dotted; } .notice_nano > .nano-content::-webkit-scrollbar { display:block; } .notice_wrap .has-scrollbar > .nano-content::-webkit-scrollbar { display:block; } .notice_nano > .nano-pane { background:rgba(22,22,26,1); position:absolute; width:10px; right:0; top:0; bottom:0; visibility:hidden\9; opacity:.01; -webkit-transition:.2s; -moz-transition:.2s; -o-transition:.2s; transition:.2s; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } .notice_nano > .nano-pane > .nano-slider { background:#000; background:rgba(244,57,70,1); position:relative; margin:0 1px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; } .notice_nano:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed { visibility:visible\9; opacity:0.99; } .notice { display:none; position: fixed; top:50%; left: 50%; z-index: 13; width:100%; } .notice .notice_wrap { position:relative; background:#16161A; border-radius: 10px; max-width:700px; min-width:350px; margin:0 auto; } .notice .notice_wrap .title { background:#F63B42; font-size:18px; line-height:50px; font-weight:500; padding:0 15px; border-radius:10px 10px 0 0 ; } .notice .notice_wrap .nano-content ul { padding:15px; font-size:16px; } .notice .notice_wrap .btn_layer_close { width:100%; height:50px; color:#bbb; text-align:center; background:#16161A; border:0; border-radius:0 0 10px 10px; } .notice .notice_wrap .btn_layer_close:hover { color:#F63B42; font-weight:700; border-radius:0 0 10px 10px; } /**추가*/ .number_picker { display:none; position: fixed; top:50%; left: 50%; z-index: 13; } .number_picker .number_wrap { float: left; position:relative; background:#16161A; border-radius: 10px; max-width:500px; min-width:320px; } .number_picker .number_wrap .title { background:#F63B42; font-size:18px; line-height:50px; font-weight:500; padding:0 15px; border-radius:10px 10px 0 0 ; } .number_picker .number_wrap .btn_layer_close { float: left; width:50%; height:50px; color:#bbb; text-align:center; background:#16161A; border:0; border-radius:0 0 10px 10px; } .pf_wrap { position:relative; width:calc(100% + 6px); margin-left:-3px; /*margin:0 auto;*/ padding:4px 0; display:inline-block;} .pf_wrap div { float: left; position:relative; width:calc(100% / var(--pf-columns)); padding:3px; } .pf_wrap div img { width:100%; } .pf_wrap .pf-list-count div { float: left; position:relative; width:calc(100% / 2); padding:3px; } .pf_wrap .pf-top-sub div { float: left; position:relative; width:calc(100% / 1); padding:3px; } .pf_wrap:has(.pf-top-sub) { display: none;} /*모바일 메뉴*/ .m_menu { position:relative; width:100%; background:#16161A; border-bottom:1px solid #25252A; height:50px; overflow: visible; } .m_menu ul { width:100%; } .m_menu ul li { position:relative; line-height:48px; cursor:pointer; text-align:center; } .m_menu ul li a { display:block; width:100%; color:#fff; } .m_menu ul li.active { border-style:solid; border-width:0 0 4px 0; border-color:#F63B42; font-weight:700; } #topBtn { position: fixed; right: 10px; bottom: 20px; cursor: pointer; display:none; z-index:10; border:2px solid #f83c3c ; background:#16161A url('/theme/movie/img/main/red_icon_scroll_top.png') no-repeat center; border-radius:3px; width:40px; height:40px; line-height:40px; } .copyright_menu { position: fixed; left: 10px; bottom: 20px; cursor: pointer; display:none; z-index:10; border:2px solid #f83c3c ; background:#16161A url('/theme/movie/img/main/red_copy_menu.png') no-repeat center; border-radius:3px; width:40px; height:40px; line-height:40px; } ul.floating-menu { position: fixed; display:none; left:53px; bottom:20px; border-radius: 3px; z-index:10; background:#16161A } ul.floating-menu li { position: relative; float: left; height: 100%; } ul.floating-menu li a { position: relative; float: left; color: #fff; font-size: 13px; padding: 4px 10px; text-decoration: none; line-height:32px; } .btn_area { width:100%; } .btn_area img { padding:2px 5px 5px 5px; height:25px; cursor:pointer; } .btn_area img:first-child { padding-left:0; } /**새로 추가**/ .same_genre_mobile { display:none !important; } .same_genre_desktop { display:block !important; } .top_content { width:1280px; margin:0 auto; display:-webkit-flex; display:flex; height:80px; } /*e 새로 추가*/ /** 신고화면 **/ :root { --bg-color: #0f0f12; --card-bg: #1a1a1f; --primary: #00f2ff; --accent: #bc13fe; --text: #ffffff; --muted: #a0a0a0; --input-bg: #25252b; --border: #3d3d45; --danger: #ff4b4b; } .report-layer { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; } .report-layer[hidden] { display: none; } .report-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.82); backdrop-filter: blur(6px); } .report-panel { position: relative; width: 100%; max-width: 420px; background: var(--card-bg); border: 1px solid #333; border-radius: 24px; padding: 32px 24px; color: var(--text); box-shadow: 0 0 20px rgba(0, 0, 0, 0.45); z-index: 1; } .report-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 10px; background: #2a2a31; color: #fff; cursor: pointer; } .report-header { text-align: center; margin-bottom: 24px; } .report-icon { font-size: 42px; color: var(--primary); margin-bottom: 8px; } .report-header h2 { margin: 0 0 8px; font-size: 24px; } .report-header p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; } .report-form { display: flex; flex-direction: column; gap: 18px; } .form-group { display: flex; flex-direction: column; gap: 8px; } .form-group label { font-size: 14px; font-weight: 700; color: var(--primary); } .form-group input,textarea, .form-group select { width: 100%; height: 48px; padding: 0 14px; background: var(--input-bg); border: 1.5px solid var(--border); border-radius: 12px; color: #fff; box-sizing: border-box; font-size: 14px; } .form-group input:focus, .form-group select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 10px rgba(0, 242, 255, 0.2); } .form-group input[readonly] { color: #8a8a8a; background: #17171c; } .submit-btn { height: 52px; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--accent), #7a00cc); color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; } .report-message { margin-top: 16px; padding: 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; background: #161a1d; border: 1px solid #2d3c42; color: var(--primary); } .report-message.is-error { background: #221718; border-color: #4a2a2d; color: var(--danger); } @media only screen and ( max-width: 1500px ) { .right_position { display:none; } } @media only screen and ( max-width: 1350px ) { /*.top_wrap { padding:0 10px; }*//*수정됨*/ } @media only screen and ( max-width: 1200px ) { /*추가됨*/ .top_content { width:100%; padding:0 10px; } .bottom_box { margin-top:50px; padding:30px 10px 0 10px; } .bottom_box ul { width:100%; } .contents { width:100%; padding:5px 7px; } .visual_wrap { width:100%; } .day_menu .menu { width:100%; } .category_menu { padding:10px; margin:0; } .category_menu ul { width:100%; } .category_menu ul li { font-size:15px; line-height:35px; padding:0 10px; margin:10px 5px 0 0; } .sort > li { font-size:15px; } .platform_menu ul { width:100%; padding:10px; } .platform_menu span { padding:0 10px; } .platform_menu ul li { font-size:15px; line-height:35px; margin:5px 5px 5px 0; } .platform_menu .active { padding:0 10px; } .platform_menu img { width:20px; } /*.detail_wrap { padding:20px 0; } .detail_grid { grid-template-columns: 1fr 1fr; gap: 20px; } */ /*.ep_contents { width:65%; padding-right:30px; }*/ .pf_wrap div { width:calc(100% / var(--pf-columns)) !important; } .pf_wrap .pf-list-count div { width:calc(100% / 2) !important; } .category_contents { margin-left: 65%; } .paging_wrap { width:100%; } .pf_wrap { width:calc(100% + 6px); margin-left:-3px; } } @media only screen and ( max-width: 1100px ) { .list_vertical .item { width:calc(100% / 4); } } @media only screen and ( max-width: 900px ) { .mobile { display:block !important; } .desktop { display:none !important; } .top_wrap .top_content { height:80px; } /*수정됨*/ .top_wrap .logo { width:100px; } .top_wrap .logo img { width:100%; } .top_wrap .search_wrap { -webkit-flex: initial; flex: initial; -webkit-justify-content: end; justify-content: end; margin-left:10px; width:100%; min-width:100px; }/*수정됨*/ .language_wrap { margin-right:45px; }/*추가*/ .language_layer { top:70px !important; } .top_wrap .search_wrap .search { min-width:100px; max-width:220px; width:100%; } /*수정됨*/ .tab > ul > li { min-width:40px; background:url('/theme/movie/img/main/dot.png') no-repeat right 10px center; } .day_menu .menu { font-size:15px; line-height:40px; } .btn_bookmark,.btn_like, .btn_report,.btn_default { font-size:15px; } /*.ep_contents { padding-right:10px; }*/ .category_contents { margin-left: 0; float: left; } .view_contents { width:100%; margin-top:60px; } .prev_next_wrap { width:100%; padding:0 10px; } .prev_next_contents .list_contents .s_title { padding:0; padding-right:20px; } .prev_next_contents .list_contents .title { font-size:16px; } .prev_next_contents .item_img { padding-top:10%; width:20%; } .prev_next_contents .list_contents dl { min-height:80px; } .bottom_view_wrap { width:100%; padding:20px 10px 0 10px; } .popular { width:100%; padding-right:0; padding-left:0; margin-bottom:10px; } .genre { width:100%; padding-right:0; padding-left:0; } .pf_wrap div { width:calc(100% / var(--pf-columns)) !important; } .same .item_img { width:25%; min-width:160px; aspect-ratio: 16 / 9;} .same .list_area { width:75%; min-width:120px;} /*추가*/ .genre_box .title { font-size:20px !important; color:#F63B42; } .genre_box .item { width:calc(100% / 4) !important;} } @media only screen and ( max-width: 800px ) { .list_vertical .item { width:calc(100% / 3); } /*추가*/ .pf_wrap div { width:calc(100% / var(--pf-columns)) !important; } .genre_box .item { width:calc(100% / 3) !important; } .board_search_wrap ul { width:80% !important; } } @media only screen and ( max-width: 700px ) { .notice { display:none; position: fixed; top:50%; left: 50%; z-index: 13; width:auto; } .notice .notice_wrap { position:relative; background:#16161A; border-radius: 10px; max-width:700px; min-width:320px; margin:0 auto; } .pf_wrap div { width:calc(100% / 2) !important; } .pf_wrap .pf-list-count div { width:calc(100% / 1) !important; } .pf_wrap .pf-top-sub div { width:calc(100% / 1) !important; } .pf_wrap:has(.pf-top-sub) { display: block;} .category_menu ul li { font-size:12px; line-height:30px; padding:0 8px; margin:5px 5px 0 0; } .day_menu .menu { font-size:13px; line-height:40px; } .platform_menu ul li { font-size:12px; line-height:30px; margin:5px 5px 5px 0; } .platform_menu span { padding:0 8px; } .platform_menu .active { padding:0 8px; } .sort { right: 30px; } .recent_more { display: none; } .list_type { display: block; position: absolute; top: -2px; right: 0px; } .detail_grid { grid-template-columns:1fr; gap: 20px; margin-top:20px;} .detail_grid .title { font-size:20px; line-height:20px; } .detail_grid .info { font-size:11px; } .ep_grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .ep_grid .item_img { padding-top:25%; width:40%; } .ep_grid .list_contents .title { font-size:16px; line-height:30px; } .ep_grid .list_contents .date { color:#999; font-size:13px; } .category_contents { display:none; } .member_wrap { width:100%; } .list_vertical .item { width: var(--item-width, calc(100% / 2)); } /*새로 추가*/ .same_genre_mobile { display:block !important; } .same_genre_desktop { display:none !important; } /*e 새로 추가*/ .btn_history_clean { margin-right: 30px; } } @media only screen and ( max-width: 520px ) { .ep { padding-left:15px; line-height:20px; font-size:12px; background-size:10px 13px; padding:0 0 10px 15px; } .author { line-height:15px; font-size:10px; background-size:10px 13px; padding:0 50px 8px 15px; } .comment { max-width:50px; color:#bbb; font-size:13px; padding:0 3px 0 19px; background:url('/theme/movie/img/main/icon_comment.png') no-repeat left 3px; background-size:14px 13px;} .datetime { max-width:74px; } .view { max-width:50px; font-size:13px; } html[data-list-type="1"] .view { max-width: 65px; } .s_bookmark { max-width:50px; font-size:13px; padding:0 3px 0 17px; background:url('/theme/movie/img/main/icon_s_bookmark.png') no-repeat left 4px; background-size:13px 13px; } .like { max-width:50px; font-size:13px; padding:0 3px 0 18px; background-size:13px 13px; } .s_share { max-width:40px; font-size:10px; padding:0 3px 0 18px; background-size:14px 12px; } .item_age { right:5px; top:5px; line-height:20px; padding:0 8px; font-size:10px; } .item_category { left:5px; bottom:5px; } .item_category dt { line-height:20px; padding:0 5px; font-size:9px; } .btn_blank { right:10px; bottom:10px; font-size:12px; padding:2px 8px; } .item_time { line-height:20px; padding-left:20px; background-size:12px 12px; padding-right:8px; font-size:11px; } .floating_platform img { height:15px; } .floating_cc img { height:20px; } .item_recommended { line-height:18px; padding:0 5px; } .detail_grid .title { font-size:18px; line-height:20px; margin-bottom:5px; } .detail_grid .info { padding:15px 0; margin-top:15px; } .btn_bookmark,.btn_like, .btn_report { font-size:13px; line-height:40px; } .btn_bookmark:before { width:17px; height:18px; } .btn_like:before { width:22px; height:18px; } .btn_default { font-size:13px; } .prev_next_contents .list_contents .s_title { font-size:12px; padding-right:10px; } .prev_next_contents .list_contents .title { font-size:15px; } .prev_next_contents .item_img { padding-top:10%; width:30%; } .view_top_wrap .btn_back { width:40px; } .view_top_wrap ul { margin-left:10px; } .scrollTo_wrap { right:10px; bottom:170px; width:30px; } .scrollToTop { background-size:14px 11px; width:30px; height:30px; line-height:30px; } .scrollToBottom { background-size:14px 11px; width:30px; height:30px; line-height:30px; } .paging_wrap span { padding:5px 10px; } .paging_wrap .paging_prev,.paging_next { padding:5px 10px; } .pf_wrap div { width:calc(100% / 2) !important; } .pf_wrap .pf-top-sub div { width:calc(100% / 1) !important; } h3 { font-size:1.03em; } .list_vertical .item { width: var(--item-width, calc(100% / 2)); } .list_vertical .item_img { padding-top: calc(9 / 16 * 100%); aspect-ratio: 16 / 9; } .list_horizontal .item_img { width:40%; height:130px; } .list_horizontal .list_area { padding:0 0 0 10px; width:60%; } .news_tiker .list_type { display:block; } .list_mobile_banner { display:block; } .btn_history_clean { margin-top: 3px; line-height:25px; padding:2px 10px; cursor: pointer; } /*추가*/ .genre_box .title { font-size:18px !important; color:#F63B42; } .genre_box .item { width:calc(100% / 2 ) !important;} .board_list .b_num { display:none; } .board_list .b_status { width:50px !important; display:none; } .board_list .b_date { width:50px !important; display:none; } .board_search_wrap ul { width:100% !important; } .bottom_box { margin-top:10px; padding:30px 20px 0 20px; } .bottom_box ul { width:100%; display:inline-block; } .bottom_box ul li { float: left; } .bottom_box .n_list_box { width:100%; } .bottom_box .link_box { width: 50%; margin-top:30px; } .board_search_wrap { padding:10px !important; } .board_list_bottom .btn_del { margin-left:0px !important; } .board_write_wrap .b_title_column { display:none; } .board_write_wrap .input_write { width:100% !important;} .selectBox { width:100% !important; } .board_write_wrap .b_column { -webkit-flex: initial; flex: initial; width: 200px; min-width: 100px; } .bottom_box .n_list_box { width: 100%; min-width: unset; margin-bottom: 20px; } .bottom_box .link_box {width: calc(50% - 5px); min-width: unset; flex-grow: 1; flex-shrink: 1; } } @media only screen and ( max-width: 450px ) { .like { display: none; } } /*추가*/ .drum-viewport { cursor: pointer; width:100%; } .drum-drum { } .drum-item { padding:0.7em 5px; } .drum { } .drum-default { position: relative; display: inline-block; width:100%; } .drum-default::before, .drum-default::after { content: ""; position: absolute; top: calc(50% - 2px); width:30px; height: 1px; background:#F63B42; background-position: 0 0; background-repeat: no-repeat; background-size: 7px 100%; box-shadow: 0 1px 2px hsla(0, 0%, 0%, .7); } .drum-default::before { background-image: linear-gradient(to right, hsla(0, 0%, 0%, .7), hsla(0, 0%, 0%, 0)); } .drum-default::after { background-position-x: 100%; background-image: linear-gradient(to left, hsla(0, 0%, 0%, .7), hsla(0, 0%, 0%, 0)); } .drum-default::before { left: 0; } .drum-default::after { right: 0; } .drum-default .drum-viewport { margin: 0; padding: 0 5px; height:10em; font-size: 18px; position: relative; } .drum-default .drum-viewport:focus { /*outline: none; box-shadow: inset 1px 0 7px hsla(0, 0%, 0%, .7), 0 0 7px 1px hsl(42, 100%, 40%);*/ } .drum-default .drum-viewport::before, .drum-default .drum-viewport::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; height: 3.5em; background: linear-gradient( to top, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0.75) 25%, rgba(0, 0, 0, 0.50) 50%, rgba(0, 0, 0, 0.25) 75%, rgba(0, 0, 0, 0) 100%) } .drum-default .drum-viewport::before { top: 0; background: linear-gradient( to bottom, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0.75) 25%, rgba(0, 0, 0, 0.50) 50%, rgba(0, 0, 0, 0.25) 75%, rgba(0, 0, 0, 0) 100%) } .drum-default .drum-viewport::after { bottom: 0; } .drum-default .drum-item { background: transparent; color:#FFF; text-align: center; padding-top: 1em; } .legal { font-size:15px; color:#777; line-height:25px; white-space: pre-wrap; word-break: break-all; overflow: auto; } .legal span { font-size:18px; color:#fff; line-height:35px; } .title_more { position: absolute; top:0; right:10px; background:url('/theme/movie/img/main/icon_title_right_arrow.png') no-repeat right 21px; font-size:15px; padding-right:15px; } .title_more a { outline:none; text-decoration: none; color:#fff; } .title_more a:hover { outline:none; text-decoration:none; color:#F63B42; } .genre_box { display: table; border-collapse:collapse; width:100%; } .genre_box .item { float: left; position:relative; width:calc(100% / 5); padding:3px; } .genre_box .item .inner { border:1px solid #25252A; line-height:30px;} .genre_box .title { font-size:25px; color:#F63B42; } .genre_box .inner span { color:#777; } .genre_box .inner a { padding:40px 20px; text-align:center; } a.animated-button.thar-one { color: #fff; cursor: pointer; display: block; position: relative; border: 1px solid #25252A; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; } a.animated-button.thar-one:hover { color: #fff !important; background-color: transparent; text-shadow: none; } a.animated-button.thar-one:hover:before { bottom: 0%; top: auto; height: 100%; } a.animated-button.thar-one:before { display: block; position: absolute; left: 0px; top: 0px; height: 0px; width: 100%; z-index: -1; content: ''; color: #000 !important; background: #25252A; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; } .board_search_wrap { width:100%; background:#16161A; overflow: auto; border-radius:3px; padding:30px; } .board_search_wrap ul { width:50%; margin:0 auto; display: -webkit-flex; display: flex; } .board_search_wrap .board_search { background:#16161A; color:#bbb; font-size:15px; width:100%; height:40px; border:1px solid #3F3F46; border-right:0; border-radius:3px 0 0 3px; outline: none; padding:0 10px; } .board_search_wrap .btn_board_search { height:40px; font-size: 15px; background:#F63B42; color:#fff; border:1px solid #F63B42; border-left:0; border-radius: 0 3px 3px 0; padding:0 20px 0 20px; } .board_search_wrap .btn_board_search_box { width:66px; } .board_search_wrap .board_search_box { -webkit-flex: 1; flex: 1; } .board_tab { border-bottom:1px solid #25252A; width:100%; margin-top:30px; } .board_tab ul { font-size:0; } .board_tab ul li { font-size:15px; display: inline-block; border:1px solid #25252A; border-bottom:0; border-right:0; background:#16161A; } .board_tab ul li a { display:inline-block; padding:0 25px; line-height:45px; } .board_tab ul li a:hover { background:#F63B42; } .board_tab ul li:first-child { border-radius:3px 0 0 0; } .board_tab ul li:last-child { border-right:1px solid #25252A; border-radius:0 3px 0 0; } .board_tab .active { background:#F63B42; } .board_list_wrap { color:#777; } .board_list_wrap span { color:#fff; } .board_list_top { position:relative; overflow:auto; padding:20px 0; } .board_list_top .txt_page { float: left; padding-top:10px; } .board_list_top .btn_write { float: right; position:relative; background:#F63B42; padding:8px 20px; border:0; border-radius:3px; color:#fff; } .board_list .title_box { color:#fff; border:1px solid #3F3F46; border-right:0; border-left:0; } .board_list .title_box li { padding:20px 5px; display: -webkit-flex; display: flex; text-align:center; } .board_list .b_num { -webkit-flex: none; flex: none; width:40px; } .board_list .b_check { -webkit-flex: none; flex: none; width:40px; } .board_list .b_title { -webkit-flex: 1; flex: 1; color:#fff; } .board_list .b_title span { padding:0 5px; min-width:50px; color:#777; } .board_list .b_name { -webkit-flex: none; flex: none; width:70px; } .board_list .b_status { -webkit-flex: none; flex: none; width:70px; } .board_list .b_date { -webkit-flex: none; flex: none; width:70px; } .board_list .list_data { color:#777; } .board_list .list_data li { padding:20px 5px; -webkit-flex; display: flex; text-align:center; border-bottom:1px solid #25252A; } .board_list .txt_left { text-align:left; } .board_list .b_title a:hover { color:#F63B42; } .board_list_bottom { position:relative; padding:20px 0; } .board_list_bottom .btn_del { position:relative; background:#F63B42; padding:5px 10px; border:0; border-radius:3px; color:#fff; margin-left:40px; } .board_list_bottom .btn_del:disabled { border: 0; background: #777; color: #fff; } input[type=checkbox].css-checkbox { position:absolute; z-index:-1000; left:-1000px; overflow:hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0; } input[type=checkbox].css-checkbox + label.checkbox-label { position:absolute; padding-left:20px; height:15px; display:inline-block; background-repeat:no-repeat; background-position:0 0; vertical-align:middle; cursor:pointer; -webkit-transition-property: none; -moz-transition-property: none; -o-transition-property: none; transition-property: none; } input[type=checkbox].css-checkbox:checked + label.checkbox-label { background-position: 0 -15px; -webkit-transition-property: none; -moz-transition-property: none; -o-transition-property: none; transition-property: none; } label.checkbox-label { background-image:url(/theme/movie/img/main/icon_checkbox.png); -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } input[type=checkbox].css-popup-checkbox { position:absolute; z-index:-1000; left:-1000px; overflow:hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0; } input[type=checkbox].css-popup-checkbox + label.checkbox-label { position:absolute; padding-left:20px; top:13px; height:15px; display:inline-block; background-repeat:no-repeat; background-position:0 0; vertical-align:middle; cursor:pointer; -webkit-transition-property: none; -moz-transition-property: none; -o-transition-property: none; transition-property: none; } input[type=checkbox].css-popup-checkbox:checked + label.checkbox-label { background-position: 0 -15px; -webkit-transition-property: none; -moz-transition-property: none; -o-transition-property: none; transition-property: none; } label.checkbox-label { background-image:url(/theme/movie/img/main/icon_checkbox.png); -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } .checkbox-label div { position:absolute; left:20px; top:-2px; min-width:180px; } input[type=checkbox].answer_checkbox { position:absolute; z-index:-1000; left:-1000px; overflow:hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0; } input[type=checkbox].answer_checkbox + label.checkbox-label { position:absolute; top:10px; margin-left:10px; padding-left:18px; height:15px; display:inline-block; background-repeat:no-repeat; background-position:0 0; vertical-align:middle; cursor:pointer; -webkit-transition-property: none; -moz-transition-property: none; -o-transition-property: none; transition-property: none; } input[type=checkbox].answer_checkbox:checked + label.checkbox-label { background-position: 0 -15px; -webkit-transition-property: none; -moz-transition-property: none; -o-transition-property: none; transition-property: none; } label.checkbox-label { background-image:url(/theme/movie/img/main/icon_checkbox.png); -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } .checkbox-label span { position:absolute; left:20px; top:-2px; width:80px; min-width:50px; } .language_wrap { position:relative; -webkit-flex: none; flex: none; width:0px; display:-webkit-flex; display:flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;} .language_wrap .btn_language { cursor:pointer; width:36px; height:36px; line-height:32px; border:1px solid #3F3F46; border-radius:50%; text-align:center; display:-webkit-flex; display:flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;} .language_layer { display: none; background:#1C1C21; position: absolute; overflow:auto; right:0; top:85px; z-index:10; border:1px solid #25252A; font-size:15px; border-radius:3px; } .language_layer ul { overflow:auto; white-space:nowrap; padding:5px 20px; } .language_layer ul li { float: left; line-height:40px; } .language_layer ul li span { padding-left:10px; } .board_view_wrap { color:#777; } .board_view_wrap span { color:#fff; } .board_view_wrap > ul > li { border-bottom:1px solid #25252A; padding:20px 0; display:-webkit-flex; display:flex; align-items: center; -webkit-justify-content: center; justify-content: center; } .board_view_wrap .b_type { -webkit-flex: none; flex: none; width:70px; text-align:center; } .board_view_wrap .b_title { -webkit-flex: 1; flex: 1; color:#fff; font-size:18px; line-height:28px; } .board_view_wrap .b_title_s { padding:15px 0; } .board_view_wrap .b_title_column { -webkit-flex: none; flex: none; width:100px; color:#fff; } .board_view_wrap .b_column { -webkit-flex: initial; flex: initial; width: 320px; min-width: 100px; } .board_view_wrap .input_write { width:300px; height:40px; background:#16161A; color:#fff; font-size:15px; border:1px solid #3F3F46; border-radius:3px; outline: none; padding:0 10px; } .board_view_wrap .input_write_full { width:100%; height:40px; background:#16161A; color:#fff; font-size:15px; border:1px solid #3F3F46; border-radius:3px; outline: none; padding:0 10px; } .board_view_wrap .b_column_tail { -webkit-flex: 1; flex: 1; } .board_view_wrap .b_column_tail a { color:#777; } .board_view_wrap .b_view_contents { color:#fff; } .board_view_wrap .b_view_contents img { max-width:100%; } .board_view_wrap .view_btn_box { text-align:right; } .board_view_wrap .btn_re_write { background:#F63B42; padding:8px 20px; border:0; border-radius:3px; color:#fff; } .board_view_wrap .btn_list { border:1px solid #3F3F46; border-radius:3px; color:#fff; padding:8px 15px; background-color: #1C1C21; } .board_view_wrap .btn_list::before { content: " "; background:url(/theme/movie/img/main/icon_b_list.png) no-repeat center center; width: 17px; height: 17px; vertical-align: middle; margin-right:5px; display: inline-block; } .board_view_wrap .btn_admin { border:1px solid #3F3F46; border-radius:3px; color:#fff; padding:8px 15px; background-color: #1C1C21; } .board_view_wrap .btn_admin::before { content: " "; background:url(/theme/movie/img/main/icon_b_admin.png) no-repeat center center; width: 17px; height: 17px; vertical-align: middle; margin-right:5px; display: inline-block; } .board_view_wrap .border_top { border-top:1px solid #25252A; } .answer { display:none; } .board_write_wrap { color:#777; } .board_write_wrap span { color:#fff; } .board_write_wrap ul li { border-bottom:1px solid #25252A; padding:20px 0; display:-webkit-flex; display:flex; align-items: center; -webkit-justify-content: center; justify-content: center; } .board_write_wrap ul li:first-child { border-top:1px solid #3F3F46; } .board_write_wrap ul li:last-child { border-bottom:1px solid #3F3F46; } .board_write_wrap .b_title_column { -webkit-flex: none; flex: none; width:100px; color:#fff; } .board_write_wrap .b_column { -webkit-flex: initial; flex: initial; width: 320px; min-width: 100px; } .board_write_wrap .input_write { width:300px; height:40px; background:#16161A; color:#fff; font-size:15px; border:1px solid #3F3F46; border-radius:3px; outline: none; padding:0 10px; } .board_write_wrap .input_write_full { width:100%; height:40px; background:#16161A; color:#fff; font-size:15px; border:1px solid #3F3F46; border-radius:3px; outline: none; padding:0 10px; } .board_write_wrap .b_column_tail { position:relative; -webkit-flex: 1; flex: 1; } .selectBox { color:#9A9A9A; padding:0 10px; border: 1px solid #3F3F46; width: 300px; height:40px; background: url(/theme/movie/img/main/icon_arrow.png) no-repeat 100% 50% #16161A; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 3px; } select::-ms-expand { /* for IE 11 */ display: none; } .board_write_bottom { position:relative; padding:20px 0; } .board_write_bottom div { float: left; width:50%; } .board_write_bottom div:first-child { padding-right:5px; } .board_write_bottom div:last-child { padding-left:5px; } .board_write_bottom .btn_cancel { width:100%; background:#1C1C21; border:1px solid #3F3F46; padding:15px 20px; border-radius:3px; color:#fff; font-weight:500; } .board_write_bottom .btn_confirm { width:100%; background:#F63B42; padding:15px 20px; border:0; border-radius:3px; color:#fff; font-weight:500; } .filebox { display:-webkit-flex; display:flex; } .filebox .upload-name { background:#16161A; display: inline-block; height: 40px; padding: 0 10px; vertical-align: middle; border: 1px solid #3F3F46; border-right:0; width: 100%; color: #999; } .filebox label { display: inline-block; color: #fff; background: #F63B42; cursor: pointer; height: 40px; padding:10px 27px; border: 1px solid #3F3F46; border-left:0; } .filebox input[type="file"] { position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0; } .file_label_box { -webkit-flex: none; flex: none; width:80px; } .file_title_box { -webkit-flex: none; flex: none; width:80px; } .icon_b_profile { float: left; background: url('/theme/movie/img/main/icon_b_profile.png') no-repeat left center; height:17px; padding-left:22px; padding-right:22px; color:#777 !important; } .icon_b_phon { float: left; background: url('/theme/movie/img/main/icon_b_phon.png') no-repeat left center; height:17px; padding-left:22px; padding-right:22px; color:#777 !important; } .icon_b_date { float: right; background: url('/theme/movie/img/main/icon_b_date.png') no-repeat left center; height:17px; padding-left:22px; padding-right:5px;color:#777 !important; } .icon_b_mail { float: left; background: url('/theme/movie/img/main/icon_b_mail.png') no-repeat left center; height:17px; padding-left:22px; padding-right:5px;color:#777 !important; } /*screen reader only*/ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: polygon(0 0, 0 0, 0 0); } /* setListType 버튼 렌더링에 따라 css 변수 처리 */ :root { --list-type: 2; /* 기본값 설정 */ --one-column-display: none; --two-column-display: block; --item-width: initial; } /* listType 값에 따른 스타일 설정 */ :root[data-list-type="1"] { --one-column-display: none; --two-column-display: block; --item-width: calc(100%); } :root[data-list-type="2"] { --one-column-display: block; --two-column-display: none; --item-width: initial; } /* 버튼 표시 설정 */ #oneColumnBtn { display: var(--one-column-display); } #twoColumnBtn { display: var(--two-column-display); } /* Swiper 컨테이너 및 슬라이드 기본 스타일 (필요에 따라 조정) */ .societyGroupTab { width:100%; box-sizing: border-box; position: relative; background: #16161a; overflow:hidden;} .societyGroupTab:after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; /*background: #e1e1e1;*/} .societyGroupTab .swiper-slide { padding: 0 1px; width: auto; } .societyGroupTab .swiper-slide:first-child { padding-left: 0; } .societyGroupTab .swiper-slide:last-child { padding-right: 0; } .societyGroupTab .swiper-slide a { display: block; } .societyGroupTab .swiper-slide a:hover .societyGroupTab__text { font-weight: bold; } .societyGroupTab__text { padding: 15px 10px 12px 10px; box-sizing: border-box; position: relative; display: inline-block; white-space: nowrap; font-size: 15px; line-height: 1; color: #FFF; } .on .societyGroupTab__text { color: #FFF; font-weight: bold; border-style: solid; border-width: 0 0 4px 0; border-color: #F63B42; } .on .societyGroupTab__text:after { content: ''; display: block; position: absolute; left: 0px; right: 0px; bottom: 0; width: 100%; height: 1px; background: #red; } .societyGroupTab__next, .societyGroupTab__prev { position: absolute; top: 0; width: 30px; height: calc(100% - 1px); z-index: 100; font-size: 0; } .societyGroupTab__next .swiper-button-disabled, .societyGroupTab__prev .swiper-button-disabled { display: none; } .societyGroupTab__next { right: 0; border: none; background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #d30000 100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #d30000 100%); } .societyGroupTab__prev { left: 0; border: none; background: -webkit-linear-gradient(left, #d30000 0%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(90deg, #d30000 0%, rgba(255, 255, 255, 0) 100%); } .societyGroupTab__next, .societyGroupTab__prev { display:none; } .swiper-notification { display:none; } /******************************************************************************/ /* pf 관련 추가 */ .top-wrap { width: 100%; margin-bottom: 4px; } /* 공통 링크/이미지 */ .gm a, .gp a, .tm a, .mm a, .mp a, .bm a, .bp a, .sg a { display: block; width: 100%; } .gm a img, .gp a img, .tm a img, .mm a img, .mp a img, .bm a img, .bp a img, .sg a img { width: 100%; height: auto; display: block; } /* top */ .gm { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; width: 100%; } .gp { display: none; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 100%; } .tm { display: block; width: 100%; } /* middle */ .mm { display: block; width: 100%; } .mp { display: none; gap: 4px; } .mp a { flex: 1; } /* bottom */ .bm { display: block; width: 100%; } .bp { display: none; gap: 4px; } .bp a { flex: 1; } /* side */ .sm { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; } .sp { display: none; } /* 태블릿 */ @media (min-width: 480px) and (max-width: 767px) { .gm { grid-template-columns: repeat(3, 1fr); } } /* PC */ @media (min-width: 768px) { .gm { display: none; } .gp { display: grid; } .tm { display: none; } .mm { display: none; } .mp { display: flex; } .bm { display: none; } .bp { display: flex; } .sm { display: none; } .sp { display: grid; grid-template-columns: repeat(1, 1fr); gap: 4px; } }