@charset "utf-8"; /* CSS Document */ /*body.on {overflow:hidden;}*/ /* 헤더 */ #header {position:fixed; left:0; right:0; top:0; z-index:999; min-width:320px; pointer-events:none;} #header .h_wrap {display:inline-block; vertical-align:middle; position:relative; z-index:1; width:100%; padding:40px 0; padding-bottom:80px; background:linear-gradient(180deg, #F4F3F7 30%, rgba(244, 243, 247, 0.8) 50%, rgba(244, 243, 247, 0) 100%); pointer-events:none;} #header .h_wrap .wrap {pointer-events:auto;} #header .h_area {display:inline-block; vertical-align:middle; position:relative; width:100%;} #header .h_logo {display:inline-block; vertical-align:middle; position:absolute; left:0; top:0; width:auto; height:40px; background-image:url("/images/common/logo.svg"); background-repeat:no-repeat; background-size:100% auto; background-position:center; aspect-ratio:4/5} #header .h_logo > a {position:absolute; left:0; right:0; top:0; bottom:0;} #header .h_menu {display:inline-block; vertical-align:middle; position:absolute; right:0; top:0; width:auto; height:40px;} #header .h_menu .hm_btn {display:inline-block; vertical-align:middle; height:100%; transition:0.3s;} #header .h_menu .hm_btn.close:hover {transform:rotate(90deg)} #header .h_menu .hm_btn.close {display:none;} #header .h_menu img {width:auto; height:100%;} #header .h_list {display:inline-block; vertical-align:middle; font-size:0; line-height:0; word-break:keep-all;} #header .h_list > li {display:inline-block; vertical-align:middle; position:relative; padding:0 50px;} #header .h_list > li > a {display:inline-block; vertical-align:middle; position:relative; font-size:18px; font-weight:700; color:#3843D0; line-height:40px; letter-spacing:0.5px; word-break:keep-all;} #header .h_list > li > a:before {content:""; position:absolute; left:0; bottom:0; width:1%; height:3px; opacity:0; background-color:#3843D0; border-radius:1px; transition:0.3s;} #header .h_list > li.on > a:before, #header .h_list > li > a:hover:before {width:100%; opacity:0.15;} #header .h_list > li .hl_submenu {display:none; vertical-align:middle; box-sizing:border-box; position:absolute; top:50px; left:50%; width:150px; margin-left:-75px; padding:10px; border-radius:6px; background-color:#3843D0;} #header .h_list > li .hl_submenu li {display:inline-block; vertical-align:middle; width:100%; border-radius:2px;} #header .h_list > li .hl_submenu li + li {margin-top:5px;} #header .h_list > li .hl_submenu li a {display:inline-block; vertical-align:middle; box-sizing:border-box; width:100%; height:25px; padding:0 10px; font-size:13px; font-weight:600; line-height:27px; color:#fff;} #header .h_list > li .hl_submenu li.on, #header .h_list > li .hl_submenu li:hover {background-color:#fff;} #header .h_list > li .hl_submenu li.on a, #header .h_list > li .hl_submenu li:hover a {color:#3843D0;} #header .h_list > li .hl_submenu:before {content:''; display:inline-block; vertical-align:middle; position:absolute; top:-12px; left:0; width:100%; height:15px;} #header .h_list > li a:hover + .hl_submenu, #header .h_list > li .hl_submenu:hover {display:inline-block;} #header .h_sitemap {display:inline-block; vertical-align:middle; position:absolute; left:0; right:0; top:-105dvh; height:100dvh; background-color:rgba(244, 243, 247, 0.85); backdrop-filter:blur(30px); transition:0.3s; pointer-events:auto;} #header .h_sitemap:before {content:""; position:absolute; left:0; right:0; top:-5dvh; height:5dvh; background-color:rgb(244, 243, 247);} #header .h_sitemap .hs_mainmenu {position:absolute; left:50%; top:50%; width:600px; margin-left:-300px; margin-top:-320px; font-size:0; line-height:0; word-break:keep-all;} #header .h_sitemap .hs_mainmenu .hs_list {display:inline-block; vertical-align:middle;} #header .h_sitemap .hs_mainmenu .hs_list > li {display:inline-block; vertical-align:middle; position:relative; box-sizing:border-box; width:100%; margin-bottom:30px; font-size:0; line-height:0; word-break:keep-all;} #header .h_sitemap .hs_mainmenu .hs_list > li > a {display:inline-block; vertical-align:middle; position:relative; float:left; font-size:35px; font-weight:700; color:#3843D0; text-align:left; line-height:40px; word-break:keep-all;} #header .h_sitemap .hs_mainmenu .hs_list > li > ul {display:inline-block; vertical-align:middle; float:right; width:calc(100% - 400px); text-align:left;} #header .h_sitemap .hs_mainmenu .hs_list > li > ul > li {display:inline-block; vertical-align:middle; width:100%;} #header .h_sitemap .hs_mainmenu .hs_list > li > ul > li > a {display:inline-block; vertical-align:middle; position:relative; font-size:18px; font-weight:400; color:#3843D0; line-height:40px; word-break:keep-all;} #header .h_sitemap .hs_mainmenu .hs_sns {float:left; margin-top:50px;} #header .h_sitemap .hs_mainmenu .hs_list a:before {content:""; position:absolute; left:0; bottom:0; width:1%; height:3px; opacity:0; background-color:#3843D0; border-radius:1px; transition:0.3s;} #header .h_sitemap .hs_mainmenu .hs_list > li > a:before {bottom:-5px;} #header .h_sitemap .hs_mainmenu .hs_list a:hover:before {width:100%; opacity:0.15;} #header.on .h_sitemap {animation:h_down 0.6s ease forwards;} #header.off .h_sitemap {animation:h_up 0.6s ease forwards;} @keyframes h_down {0% {top:-105dvh;}70% {top:4dvh;}100% {top:0;}} @keyframes h_up {0% {top:0;}100% {top:-100dvh;}} #header.on > .h_wrap {background:none;} #header.on .h_list {opacity:0; pointer-events:none;} #header.on .h_menu .hm_btn.close {display:inline-block; vertical-align:middle;} #header.on .h_menu .hm_btn.open {display:none;} /* aside */ #aside {position:fixed; right:60px; bottom:60px; z-index:100; pointer-events:none;} #aside .a_scrolltop {position:absolute; right:0; bottom:0; width:60px; height:60px; border-radius:50%; background-color:#fff; opacity:0.95; transition:0.3s; box-shadow:0px 10px 20px 0px rgba(18, 18, 20, 0.06); opacity:0;} #aside.on .a_scrolltop {pointer-events:auto; opacity:1;} #aside .a_scrolltop:hover {transform:scale(1.1);} #aside .a_scrolltop i {position:absolute; left:50%; top:50%; width:20px; margin-left:-10px; margin-top:-10px; background-image:url("/images/common/icon_top.svg"); background-repeat:no-repeat; background-size:100% auto; background-position:center; aspect-ratio:1/1;} /* 컨텐츠 */ #contents {display:inline-block; vertical-align:middle; float:left; position:relative; width:100%; word-break:keep-all; word-wrap: break-word;} #contents .c_hero {display:inline-block; vertical-align:middle; width:100%; height:100dvh; background-image:url("/images/pic_main.jpg"); background-repeat:no-repeat; background-size:cover; background-position:center center;} #contents .c_hero .ch_deco {position:absolute; left:50%; top:50%; min-width:18%; height:52vh; aspect-ratio:4/5; transform:translate(-50%,-50%)} #contents .c_hero .ch_deco i {position:absolute; width:18.75%; background-image:url("/images/deco_star.png"); background-repeat:no-repeat; background-size:100% auto; background-position:center; aspect-ratio:1/1; opacity:0;} #contents .c_hero .ch_deco i:nth-child(1) {left:58%; top:2%; animation:blink 2s infinite;} #contents .c_hero .ch_deco i:nth-child(2) {left:4%; bottom:26.5%; animation:blink 2s infinite; animation-delay:0.4s;} #contents .c_hero .ch_deco i:nth-child(3) {width:25%; right:4%; bottom:23%; animation:blink 3s infinite; animation-delay:0.8s;} #contents .c_hero .ch_deco i:nth-child(4) {right:1.5%; bottom:52%; animation:blink 2s infinite; animation-delay:1.6s;} #contents .c_hero .ch_deco i:nth-child(5) {right:27%; bottom:52%; animation:blink 2s infinite; animation-delay:2s;} #contents .c_hero .ch_deco i:nth-child(6) {left:10%; bottom:52%; animation:blink 2s infinite; animation-delay:1.6s;} #contents .c_hero .ch_deco i:nth-child(7) {width:25%; left:28%; top:15%; animation:blink 3s infinite; animation-delay:0.8s;} #contents .c_hero .ch_deco i:nth-child(8) {left:28%; top:74%; animation:blink 2s infinite; animation-delay:0.4s;} #contents .c_hero .ch_logo {position:absolute; left:0; right:0; top:0; bottom:0; background-image:url("/images/logo_main.png"); background-repeat:no-repeat; background-size:cover; background-position:center center;} /* 반짝이는 애니메이션 정의 */ @keyframes blink {0% {opacity:1;} 80% {opacity:0;} 100% {opacity:0;}} @keyframes blinkrotate {0% {opacity:1; transform:rotate(0);} 90% {opacity:0;} 100% {opacity:0; transform:rotate(30deg);}} /* sub */ #contents.c_sub {margin-top:180px; margin-bottom:80px;} #contents.c_sub .cs_title {margin-bottom:60px;} #contents.c_sub .sort_wrap {display:flex; gap:10px;} #contents.c_sub .cs_sort {display:inline-block; vertical-align:middle; box-sizing:border-box; width:190px; background-color:#fff; border-radius:20px; padding:3px; box-shadow:0px 10px 20px 0px #1212140F;} #contents.c_sub .cs_sort li {display:inline-block; vertical-align:middle; float:left; width:50%;} #contents.c_sub .cs_sort li button {display:inline-block; vertical-align:middle; width:100%; height:34px; border-radius:17px; font-family:"Pretendard"; font-size:14px; font-weight:500; color:#231F20; line-height:34px; letter-spacing:-0.5px; word-break:keep-all;} #contents.c_sub .cs_sort li button.on, #contents.c_sub .cs_sort li button:hover {background-color:#3843D0; color:#E6E7E8; font-weight:700;} #contents.c_sub .cs_sort li button i {display:inline-block; position:relative; top:4px; width:18px; height:18px; margin-right:5px; background-repeat:no-repeat; background-size:100% auto; background-position:center; aspect-ratio:1/1; filter:invert(7%) sepia(8%) saturate(823%) hue-rotate(295deg) brightness(93%) contrast(86%);} #contents.c_sub .cs_sort li button.on i, #contents.c_sub .cs_sort li button:hover i {filter:invert(97%) sepia(4%) saturate(50%) hue-rotate(167deg) brightness(96%) contrast(91%);} #contents.c_sub .cs_sort li button i.recent {background-image:url("/images/common/icon_recent.svg");} #contents.c_sub .cs_sort li button i.sort {background-image:url("/images/common/icon_sort.svg");} #contents.c_sub .cs_sort li button i.column {background-image:url("/images/common/icon_column.svg");} #contents.c_sub .cs_sort li button i.row {background-image:url("/images/common/icon_row.svg");} #contents.c_sub .cs_list, #contents.c_sub .cs_view {display:inline-block; vertical-align:middle; width:100%;} #contents.c_sub .cs_top {display:inline-block; vertical-align:middle; width:100%; margin-bottom:60px; text-align:left;} #contents.c_sub .cs_top .cs_search {display:flex; box-sizing:border-box; width:auto; padding:3px; border-radius:50px; background-color:#EBEAEE; flex-direction:row; flex-wrap:nowrap; align-items:center;} #contents.c_sub .cs_top .cs_search .css_dropdown {display:inline-block; vertical-align:middle; position:relative; width:90px; height:34px; padding:0 25px 0 12px; border-radius:50px; border:0; background-color:#fff; font-family:"Pretendard"; font-size:14px; font-weight:500; color:#231F20; line-height:30px; -webkit-appearance:none; appearance:none; word-break:keep-all;} #contents.c_sub .cs_top .cs_search .css_dropdown.on {border-radius:17px 17px 0 0;} #contents.c_sub .cs_top .cs_search .css_dropdown:before {content:''; display:inline-block; vertical-align:middle; position:absolute; top:10px; right:12px; width:14px; height:14px; background-image:url("/images/common/icon_dropdown_arrow.svg"); background-repeat:no-repeat; background-size:100% auto; background-position:center;} #contents.c_sub .cs_top .cs_search .css_dropdown:after {content:''; display:none; vertical-align:middle; position:absolute; bottom:0; left:12px; right:12px; z-index:3; width:auto; height:1px; background-color:#231F201A;} #contents.c_sub .cs_top .cs_search .css_dropdown.on:before {transform:rotate(180deg);} #contents.c_sub .cs_top .cs_search .css_dropdown.on:after {display:inline-block;} #contents.c_sub .cs_top .cs_search .css_dropdown span {display:inline-block; vertical-align:middle; overflow:hidden; width:100%; white-space:nowrap; text-overflow:ellipsis; text-align:left; pointer-events:none;} #contents.c_sub .cs_top .cs_search .css_dropdown ul {display:none; vertical-align:middle; position:absolute; top:32px; left:0; z-index:1; width:100%; padding-bottom:2px; border-radius:0 0 17px 17px; background-color:#fff; flex-direction:column;} #contents.c_sub .cs_top .cs_search .css_dropdown li {display:inline-block; vertical-align:middle; box-sizing:border-box; width:100%; margin-top:5px; padding:0 25px 0 12px; font-size:14px; font-weight:500; color:#231F20; line-height:30px; text-align:left;} #contents.c_sub .cs_top .cs_search .css_dropdown li.t2 {font-size:13px;} #contents.c_sub .cs_top .cs_search .css_words {display:inline-block; vertical-align:middle; width:120px; margin-left:10px; padding:2px 0; font-family:"Pretendard"; font-size:14px; font-weight:500; color:#231F20; line-height:30px; border:0; background-color:transparent; word-break:keep-all;} #contents.c_sub .cs_top .cs_search .css_btn {display:inline-block; vertical-align:middle; width:34px; height:34px; margin-left:10px; background-image:url("/images/common/icon_search.svg"); background-repeat:no-repeat; background-size:100% auto; background-position:center; aspect-ratio:1/1;} #contents.c_sub .cs_top .csf_popup_open_btn {display:flex; padding:10px 25px; border-radius:50px; background-color:#231F20; font-size:14px; font-weight:800; color:#F4F3F7; line-height:20px; box-shadow:0px 10px 20px 0px #1212140F; word-break:keep-all;} #contents.c_sub .cs_top .csf_popup_open_btn i {display:inline-block; vertical-align:middle; width:18px; height:18px; margin-right:5px; padding:1px 0; background-image:url("/images/common/icon_filter.svg"); background-repeat:no-repeat; background-size:100% auto; background-position:center; aspect-ratio:1/1; filter:invert(97%) sepia(4%) saturate(50%) hue-rotate(167deg) brightness(96%) contrast(91%);} #contents.c_sub .cs_top .csf_popup_bg {display:inline-block; vertical-align:middle; position:fixed; top:-50%; bottom:-50%; left:-50%; right:-50%; z-index:1000; background-color:rgba(0,0,0,0.75); opacity:0; pointer-events:none; transition:0.3s all;} #contents.c_sub .cs_top #cs_filter_popup.on + .csf_popup_bg {opacity:1; pointer-events:auto;} #contents.c_sub .cs_top #cs_filter_popup {display:inline-block; vertical-align:middle; overflow:hidden; box-sizing:border-box; position:fixed; top:0; bottom:0; right:-100%; z-index:1001; width:401px; margin-right:-1px; padding:40px 60px; background-color:#fff; transition:0.3s all;} #contents.c_sub .cs_top #cs_filter_popup .csfp_top {display:inline-block; vertical-align:middle; width:100%;} #contents.c_sub .cs_top #cs_filter_popup .csfp_top .csfpt_title {display:inline-block; vertical-align:middle; padding:5px 0; font-size:18px; font-weight:700; color:#3843D0; line-height:30px; word-break:keep-all;} #contents.c_sub .cs_top #cs_filter_popup .csfp_top .csfpt_title i {display:inline-block; vertical-align:middle; width:18px; height:12px; margin-right:5px; background-image:url("/images/common/icon_popup_deco.svg"); background-repeat:no-repeat; background-size:100% auto; background-position:center;} #contents.c_sub .cs_top #cs_filter_popup .csfp_top .csf_popup_close_btn {display:inline-block; vertical-align:middle; float:right; width:40px; height:40px; border-radius:50px; background-color:#3843D0; aspect-ratio:1/1; background-image:url("/images/common/icon_popup_close.svg"); background-repeat:no-repeat; background-size:100% auto; background-position:center; transition:0.3s all;} #contents.c_sub .cs_top #cs_filter_popup .csfp_top .csf_popup_close_btn:hover {transform:rotate(180deg);} #contents.c_sub .cs_top #cs_filter_popup .csfp_content {display:inline-block; vertical-align:middle; overflow:auto; width:100%; height:calc(100% - 125px); margin-top:20px; border-top:1px solid #231F20; -webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none; -o-text-size-adjust:none;} #contents.c_sub .cs_top #cs_filter_popup .csfp_content::-webkit-scrollbar {width:0;} #contents.c_sub .cs_top #cs_filter_popup .csfp_content::-webkit-scrollbar-thumb {background-color:#fff; border-radius:0; background-clip:padding-box; border:2px solid transparent;} #contents.c_sub .cs_top #cs_filter_popup .csfp_content::-webkit-scrollbar-thumb:hover {background-color:#fff;} #contents.c_sub .cs_top #cs_filter_popup .csfp_content::-webkit-scrollbar-track {background-color:#fff; border-radius:0;} #contents.c_sub .cs_top #cs_filter_popup .csfp_content .csfpc_title {display:inline-block; vertical-align:middle; position:relative; box-sizing:border-box; width:100%; margin-top:15px; margin-bottom:15px; padding-left:10px; font-size:15px; font-weight:700; color:#231F20; line-height:30px; letter-spacing:-0.5px; word-break:keep-all;} #contents.c_sub .cs_top #cs_filter_popup .csfp_content .csfpc_title:before {content:''; display:inline-block; vertical-align:middle; position:absolute; top:8px; right:10px; width:14px; height:14px; background-image:url("/images/common/icon_dropdown_arrow.svg"); background-repeat:no-repeat; background-size:14px auto; background-position:center;} #contents.c_sub .cs_top #cs_filter_popup .csfp_content .csfpc_title.on:before {transform:rotate(180deg);} #contents.c_sub .cs_top #cs_filter_popup .csfp_content .csfpc_artists {display:inline-block; vertical-align:middle; width:100%; border-bottom:1px solid #231F20;} #contents.c_sub .cs_top #cs_filter_popup .csfp_content .csfpc_artists select {display:inline-block; vertical-align:middle; width:100%; padding:5px 0; font-size:14px; font-weight:600; color:#231F20; line-height:20px; word-break:keep-all;} #contents.c_sub .cs_top #cs_filter_popup .csfp_content .csfpc_artists ul {display:none; overflow:auto; width:100%; /*height:345px; */ margin-bottom:15px; box-sizing:border-box; padding:0 0 0 10px; -webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none; -o-text-size-adjust:none;} #contents.c_sub .cs_top #cs_filter_popup .csfp_content .csfpc_artists ul::-webkit-scrollbar {width:10px;} #contents.c_sub .cs_top #cs_filter_popup .csfp_content .csfpc_artists ul::-webkit-scrollbar-thumb {background-color:#231F20; border-radius:10px; background-clip:padding-box; border:2px solid transparent;} #contents.c_sub .cs_top #cs_filter_popup .csfp_content .csfpc_artists ul::-webkit-scrollbar-thumb:hover {background-color:#231F20;} #contents.c_sub .cs_top #cs_filter_popup .csfp_content .csfpc_artists ul::-webkit-scrollbar-track {background-color:#F4F3F7; border-radius:10px;} #contents.c_sub .cs_top #cs_filter_popup .csfp_content .csfpc_artists strong.on + ul {display:inline-block; vertical-align:middle;} #contents.c_sub .cs_top #cs_filter_popup .csfp_content .csfpc_artists li {display:inline-block; vertical-align:middle; position:relative; width:100%; box-sizing:border-box; padding:5px 30px; font-family:"Pretendard"; font-size:14px; font-weight:600; color:#231F20; line-height:20px; word-break:keep-all;} #contents.c_sub .cs_top #cs_filter_popup .csfp_content .csfpc_artists li:hover {text-decoration:underline; text-underline-position:under;} #contents.c_sub .cs_top #cs_filter_popup .csfp_content .csfpc_artists li input {display:inline-block; vertical-align:middle; position:absolute; top:0; bottom:0; left:0; right:0; opacity:0;} #contents.c_sub .cs_top #cs_filter_popup .csfp_content .csfpc_artists li label {display:inline-block; vertical-align:middle; position:absolute; top:5px; left:0; width:20px; height:20px; background-image:url("/images/common/icon_checkbox_select.svg"); background-repeat:no-repeat; background-size:200% auto; background-position:left center;} #contents.c_sub .cs_top #cs_filter_popup .csfp_content .csfpc_artists li label:before {content:''; display:inline-block; vertical-align:middle; position:absolute; top:0; bottom:0; left:0; right:-55px;} #contents.c_sub .cs_top #cs_filter_popup .csfp_content .csfpc_artists li input:checked + label {background-position:right center;} #contents.c_sub .cs_top #cs_filter_popup .csfp_content .csfpc_cate {display:inline-block; vertical-align:middle; width:100%;} #contents.c_sub .cs_top #cs_filter_popup .csfp_content .csfpc_cate select {display:inline-block; vertical-align:middle; width:100%;} #contents.c_sub .cs_top #cs_filter_popup .csfp_content .csfpc_cate ul {display:none; width:100%; margin-bottom:15px;} #contents.c_sub .cs_top #cs_filter_popup .csfp_content .csfpc_cate strong.on + ul {display:inline-block; vertical-align:middle;} #contents.c_sub .cs_top #cs_filter_popup .csfp_content .csfpc_cate li {display:inline-block; vertical-align:middle; width:100%; position:relative; box-sizing:border-box; margin-bottom:5px; padding:0; font-size:14px; font-weight:600; color:#231F20; line-height:20px; word-break:keep-all;} #contents.c_sub .cs_top #cs_filter_popup .csfp_content .csfpc_cate li input {display:inline-block; vertical-align:middle; position:absolute; top:0; bottom:0; left:0; right:0; opacity:0;} #contents.c_sub .cs_top #cs_filter_popup .csfp_content .csfpc_cate li label {display:inline-block; vertical-align:middle; box-sizing:border-box; width:100%; padding:5px 0; border-radius:50px; border:2px solid #231F201A; font-size:14px; font-weight:500; color:#231F20; line-height:30px; text-align:center; word-break:keep-all;} #contents.c_sub .cs_top #cs_filter_popup .csfp_content .csfpc_cate li input:checked + label, #contents.c_sub .cs_top #cs_filter_popup .csfp_content .csfpc_cate li input:hover + label {border-color:#231F20; font-weight:700;} #contents.c_sub .cs_top #cs_filter_popup .csfp_btn {display:flex; width:100%; padding-top:15px; padding-bottom:40px; flex-direction:row; justify-content:center; align-items:center; flex-wrap:nowrap; gap:10px; border-top:1px solid #231F20;} #contents.c_sub .cs_top #cs_filter_popup .csfp_btn .csfp_reset {display:inline-block; vertical-align:middle;} #contents.c_sub .cs_top #cs_filter_popup .csfp_btn .csfp_ok {display:inline-block; vertical-align:middle;} #contents.c_sub .cs_top .csy_popup_bg {display:inline-block; vertical-align:middle; position:fixed; top:-50%; bottom:-50%; left:-50%; right:-50%; z-index:1000; background-color:rgba(0,0,0,0.75); opacity:0; pointer-events:none; transition:0.3s all;} #contents.c_sub .cs_top #cs_youtubePopup.on + .csy_popup_bg {opacity:1; pointer-events:auto;} #contents.c_sub .cs_top #cs_youtubePopup {display:flex; position:fixed; left:0; right:0; top:-100%; z-index:1001; height:100%; transition:0.3s all; pointer-events:none; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:center;} #contents.c_sub .cs_top #cs_youtubePopup .csy_box {width:1024px; pointer-events:none; text-align:center;} #contents.c_sub .cs_top #cs_youtubePopup .csy_box iframe {border-radius:5px; box-shadow:0 20px 40px #12121480; background-color:#231F20; pointer-events:auto;} #contents.c_sub .cs_top #cs_youtubePopup .csy_box p {display:inline-block; vertical-align:middle; width:100%; margin-top:30px; font-family:"Pretendard"; font-size:16px; font-weight:500; color:#F4F3F7; line-height:30px; text-align:center; word-break:keep-all;} #contents.c_sub .cs_top #cs_youtubePopup .csy_box i {display:inline-block; vertical-align:middle; width:60px; height:60px; margin-top:60px; border-radius:50%; background-color:#3843D0; background-image:url("/images/common/btn_close_popup.svg"); background-repeat:no-repeat; background-size:100% auto; background-position:center; aspect-ratio:1/1; cursor:pointer; pointer-events:auto; transition:0.3s all;} #contents.c_sub .cs_top #cs_youtubePopup .csy_box i:hover {transform:rotate(90deg);} #contents.c_sub .no_contents {display:inline-block; vertical-align:middle; width:100%; padding:100px 0;} #contents.c_sub .no_contents i {display:inline-block; vertical-align:middle; width:60px; background-image:url("/images/common/icon_alert.svg"); background-repeat:no-repeat; background-size:100% auto; background-position:center; aspect-ratio:1/1;} #contents.c_sub .no_contents p {display:inline-block; vertical-align:middle; width:100%; margin-top:20px; text-align:center; font-family:"Pretendard"; font-size:25px; font-weight:600; line-height:35px; letter-spacing:-1px;} /* company - about us */ #contents.c_sub .cs_nav_btn {display:flex; vertical-align:middle; text-align:center; margin-bottom:60px; flex-direction:row; flex-wrap:nowrap; justify-content:center; gap:10px;} #contents.c_sub .cs_nav_btn button {display:inline-block; vertical-align:middle; height:65px; border-radius:50px; font-size:25px; line-height:61px; cursor:pointer;} #contents.c_sub .cs_about {display:inline-block; vertical-align:middle; width:100%; max-width:1400px; margin:40px auto;} #contents.c_sub .cs_about .csc_section {display:inline-block; vertical-align:middle; width:100%; margin-bottom:180px;} #contents.c_sub .cs_about .csc_section .csc_title {display:inline-block; vertical-align:middle; position:relative; width:100%; padding-left:18px; font-size:30px; font-weight:800; line-height:40px; color:#231F20; letter-spacing:-1.2px; text-align:left; word-break:keep-all;} #contents.c_sub .cs_about .csc_section .csc_title:before {content:''; display:inline-block; vertical-align:middle; position:absolute; top:16px; left:0; width:8px; height:8px; border-radius:8px; background-color:#3843D0;} #contents.c_sub .cs_about .csc_section .csc_box {display:inline-block; vertical-align:middle; width:100%; margin-top:60px;} #contents.c_sub .cs_about .csc_are {display:inline-block; vertical-align:middle; width:100%;} #contents.c_sub .cs_about .csc_are .csc_box {display:flex; position:relative; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between;} #contents.c_sub .cs_about .csc_are .csc_box:before {content:''; display:inline-block; vertical-align:middle; position:absolute; top:50%; left:440px; right:0; z-index:0; width:auto; height:2px; margin-top:-1px; background-color:#231F20; opacity:0.15;} #contents.c_sub .cs_about .csc_are .csc_box:after {content:''; display:inline-block; vertical-align:middle; position:absolute; top:80px; bottom:80px; left:545px; right:40%; border-radius:5px; border:2px solid #231F20; border-right:0; opacity:0.15;} #contents.c_sub .cs_about .csc_are .csca_left {display:flex; vertical-align:middle; position:relative; width:440px; flex-direction:column; flex-wrap:nowrap; align-items:center; gap:22px;} #contents.c_sub .cs_about .csc_are .csca_left p {text-align:center; color:#F4F3F7; font-family:"Pretendard"; font-size:25px; font-weight:700; line-height:35px; letter-spacing:-1px;} #contents.c_sub .cs_about .csc_are .csca_left .cscal_icon {display:inline-block; vertical-align:middle; position:absolute; top:50%; left:50%; z-index:-1; width:440px; aspect-ratio:1/1; transform:translate(-50%, -50%);} #contents.c_sub .cs_about .csc_are .csca_left .cscal_icon:before {content:''; display:inline-block; vertical-align:middle; position:absolute; top:40px; bottom:40px; left:40px; right:40px; z-index:1; border-radius:50%; background-color:#3843D0;} #contents.c_sub .cs_about .csc_are .csca_left .cscal_icon i {display:inline-block; vertical-align:middle; position:absolute; border-radius:50%; background-color:#3843D0; animation-name:wave; animation-duration:2s; animation-iteration-count:infinite; animation-timing-function:linear; opacity:0; animation-fill-mode:forwards;} #contents.c_sub .cs_about .csc_are .csca_left .cscal_icon i.t2 {animation-delay:1s;} @keyframes wave { 1% {left:50%; right:50%; top:50%; bottom:50%; opacity:0;} 10% {left:40px; right:40px; top:40px; bottom:40px; opacity:0;} 45% {left:20px; right:20px; top:20px; bottom:20px; opacity:0.6;} 99% {left:0; right:0; top:0; bottom:0; opacity:0;} 100% {left:0; right:0; top:0; bottom:0; opacity:0;} } #contents.c_sub .cs_about .csc_are .csca_right {display:flex; vertical-align:middle; position:relative; z-index:1; width:50%; flex-direction:column; flex-wrap:nowrap; gap:20px;} #contents.c_sub .cs_about .csc_are .csca_right .cscar_box {display:flex; vertical-align:middle; box-sizing:border-box; width:100%; padding:50px; border-radius:5px; background-color:#fff; box-shadow:0px 30px 60px 0px rgba(18, 18, 20, 0.06); flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center;} #contents.c_sub .cs_about .csc_are .csca_right .cscar_box strong {width:128px; margin-right:50px; font-size:50px; font-weight:800; line-height:60px; letter-spacing:-1px; text-align:left; word-break:keep-all;} #contents.c_sub .cs_about .csc_are .csca_right .cscar_box strong span {color:#3843D0;} #contents.c_sub .cs_about .csc_are .csca_right .cscar_box p {font-family:"Pretendard"; font-size:18px; font-weight:700; line-height:30px; color:#231F2080; letter-spacing:-0.72px; text-align:left; word-break:keep-all;} #contents.c_sub .cs_about .csc_are .csca_right .cscar_box p span {display:block;} #contents.c_sub .cs_about .csc_are .csca_right .cscar_box p span b {font-weight:700; color:#231F20;} #contents.c_sub .cs_about .csc_are .csc_sign {width:100%;} #contents.c_sub .cs_about .csc_are .csc_sign .cscs_box {display:flex; margin-top:40px; flex-direction:row; align-items:center; justify-content:flex-end; gap:5px;} #contents.c_sub .cs_about .csc_are .csc_sign p {display:inline-block; vertical-align:middle; font-family:"Pretendard"; font-size:16px; font-weight:600; line-height:30px; letter-spacing:-0.64px;} #contents.c_sub .cs_about .csc_do {display:inline-block; vertical-align:middle; width:100%;} #contents.c_sub .cs_about .csc_do .csc_box {display:flex; gap:40px;} #contents.c_sub .cs_about .csc_do .cscd_content {display:flex; vertical-align:middle; box-sizing:border-box; float:left; width:calc(25% - 30px); padding:70px 10px; border-radius:5px; background-color:#fff; box-shadow:0px 30px 60px 0px rgba(18, 18, 20, 0.06); flex-direction:column; flex-wrap:nowrap; align-items:center;} #contents.c_sub .cs_about .csc_do .cscd_content i {display:inline-block; vertical-align:middle; width:50px; height:50px; background-repeat:no-repeat; background-size:100% auto; background-position:center; aspect-ratio:1/1;} #contents.c_sub .cs_about .csc_do .cscd_content p {display:inline-block; vertical-align:middle; margin-top:20px; font-family:"Pretendard"; font-size:14px; font-weight:500; color:#231F20; line-height:30px; letter-spacing:-0.56px; text-align:center; word-break:keep-all;} #contents.c_sub .cs_about .csc_do .cscd_content p span {display:block;} #contents.c_sub .cs_about .csc_do .cscd_content p span b {position:relative; z-index:1; font-weight:700;} #contents.c_sub .cs_about .csc_do .cscd_content p span b:before {content:''; position:absolute; bottom:0; left:-2px; right:-2px; z-index:-1; height:4px; background-color:#D1D9FF;} #contents.c_sub .cs_about .csc_do .cscd_entertainment i {background-image:url("/images/aboutus/icon_whatwedo01.svg");} #contents.c_sub .cs_about .csc_do .cscd_management i {background-image:url("/images/aboutus/icon_whatwedo02.svg");} #contents.c_sub .cs_about .csc_do .cscd_production i {background-image:url("/images/aboutus/icon_whatwedo03.svg");} #contents.c_sub .cs_about .csc_do .cscd_leed i {background-image:url("/images/aboutus/icon_whatwedo04.svg");} #contents.c_sub .cs_about .csc_history {display:inline-block; vertical-align:middle; width:100%; margin-bottom:0;} #contents.c_sub .cs_about .csc_history .yearly {display:flex; vertical-align:middle; position:relative; width:100%; padding-bottom:40px; gap:180px; flex-direction:row; flex-wrap:nowrap; align-items:flex-start; justify-content:flex-start;} #contents.c_sub .cs_about .csc_history .yearly + .yearly {margin-top:30px;} #contents.c_sub .cs_about .csc_history .yearly:before {content:''; position:absolute; top:70px; bottom:0; left:60px; width:1px; height:auto; background-color:#231F20; opacity:0.15;} #contents.c_sub .cs_about .csc_history .yearly:last-child:before {display:none;} #contents.c_sub .cs_about .csc_history .yearly strong {display:inline-block; vertical-align:middle; width:120px; font-size:50px; font-weight:700; line-height:40px; color:#231F20; letter-spacing:-2px; word-break:keep-all;} #contents.c_sub .cs_about .csc_history .yearly .event {display:inline-block; vertical-align:middle; width:calc(100% - 300px);} #contents.c_sub .cs_about .csc_history .yearly .event p {display:flex; vertical-align:middle; width:100%; flex-direction:row; flex-wrap:nowrap; align-items:flex-start; justify-content:flex-start;} #contents.c_sub .cs_about .csc_history .yearly .event p + p {margin-top:5px;} #contents.c_sub .cs_about .csc_history .yearly .event .month {display:inline-block; vertical-align:middle; box-sizing:border-box; position:relative; width:100px; padding-left:21px; font-family:"Pretendard"; font-size:18px; font-weight:800; line-height:40px; text-align:left; letter-spacing:-0.72px; word-break:keep-all;} #contents.c_sub .cs_about .csc_history .yearly .event .month:before {content:''; display:inline-block; vertical-align:middle; position:absolute; top:17px; left:0; width:6px; height:6px; border-radius:6px; background-color:#3843D0;} #contents.c_sub .cs_about .csc_history .yearly .event .text {display:inline-block; vertical-align:middle; width:calc(100% - 105px); margin-left:5px; font-family:"Pretendard"; font-size:18px; font-weight:500; line-height:40px; color:#231F20; letter-spacing:-0.72px; text-align:left; opacity:0.5; word-break:keep-all;} /* company - contact us */ #contents.c_sub .cs_contact .privacy_popup_bg {display:inline-block; vertical-align:middle; position:fixed; top:-50%; bottom:-50%; left:-50%; right:-50%; z-index:1000; background-color:rgba(0,0,0,0.75); opacity:0; pointer-events:none; transition:0.3s all;} #contents.c_sub .cs_contact .privacy_popup.on + .privacy_popup_bg {opacity:1; pointer-events:auto;} #contents.c_sub .cs_contact .privacy_popup {display:flex; position:fixed; left:0; right:0; top:-200%; z-index:1002; height:100vh; transition:0.3s all; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:center;} #contents.c_sub .cs_contact .privacy_popup.on {top:0;} #contents.c_sub .cs_contact .privacy_popup .privacy_popup_wrap {display:inline-block; vertical-align:middle; box-sizing:border-box; width:600px; padding:30px; border-radius:5px; background-color:#fff; box-shadow:0px 30px 60px 0px rgba(18, 18, 20, 0.06);} #contents.c_sub .cs_contact .privacy_popup strong {display:inline-block; vertical-align:middle; position:relative; width:100%; margin-top:0; margin-bottom:60px; font-family:"Pretendard"; font-size:25px; font-weight:700; line-height:35px; letter-spacing:-1px; text-align:left;} #contents.c_sub .cs_contact .privacy_popup strong:before {content:''; display:inline-block; vertical-align:middle; position:absolute; bottom:-30px; left:0; right:0; width:auto; height:1px; background-color:#231F20;} #contents.c_sub .cs_contact .privacy_popup p {font-family:"Pretendard"; font-size:16px; font-weight:500; line-height:30px; letter-spacing:-0.64px; text-align:left;} #contents.c_sub .cs_contact .privacy_popup p.opacity {opacity:0.5;} #contents.c_sub .cs_contact .privacy_popup p + p {margin-top:20px;} #contents.c_sub .cs_contact .privacy_popup p > span {display:inline-block;} #contents.c_sub .cs_contact .privacy_popup p > span span {display:inline-block;} #contents.c_sub .cs_contact .privacy_popup p > span b {font-weight:700;} #contents.c_sub .cs_contact .privacy_popup p > span i {display:inline-block;} #contents.c_sub .cs_contact .privacy_popup .privacy_close_btn_wrap {display:inline-block; vertical-align:middle; width:100%; margin-top:30px; text-align:center;} #contents.c_sub .cs_contact {display:inline-block; vertical-align:middle; box-sizing:border-box; width:100%; max-width:1400px; margin:0 auto; padding:80px 40px; border-radius:5px; background-color:#fff; box-shadow:0px 30px 60px 0px rgba(18, 18, 20, 0.06);} #contents.c_sub .cs_contact .csc_section {display:none; vertical-align:middle; width:100%; max-width:600px;} #contents.c_sub .cs_contact .csc_section.on {display:inline-block;} #contents.c_sub .cs_contact .csc_section .csc_title {display:inline-block; vertical-align:middle; position:relative; width:auto; font-size:30px; font-weight:800; line-height:40px; color:#231F20; letter-spacing:-1.2px; word-break:keep-all;} #contents.c_sub .cs_contact .csc_section .csc_form strong {width:113px; margin-top:10px; font-size:18px; font-weight:600; line-height:30px; letter-spacing:-0.72px; text-align:left; word-break:keep-all;} #contents.c_sub .cs_contact .csc_section .csc_form strong i {color:#3843D0;} #contents.c_sub .cs_contact .csc_section input {display:inline-block; vertical-align:middle; box-sizing:border-box; padding:10px 15px; border:0; border-radius:5px; background-color:#F4F3F7; outline:none; font-family:"Pretendard"; font-size:16px; font-weight:500; line-height:30px; letter-spacing:-0.64px;} /* #contents.c_sub .cs_contact .csc_section input#birthday {position:relative; background-image:url("/images/common/icon_calendar.svg"); background-repeat:no-repeat; background-size:20px auto; background-position:right 15px center; padding-right:10px; height:50px; color:#6d6d6d;} */ #contents.c_sub .cs_contact .csc_section input[type='radio'] {display:none;} #contents.c_sub .cs_contact .csc_section .t1 input:hover, #contents.c_sub .cs_contact .csc_section .t1 textarea:hover {outline:1px solid #3843D0;} #contents.c_sub .cs_contact .csc_section textarea {display:inline-block; vertical-align:middle; box-sizing:border-box; resize:none; height:200px; padding:15px; border-radius:5px; border:0; background-color:#F4F3F7; font-size:16px; font-family:"Pretendard"; font-weight:500; line-height:30px; letter-spacing:-0.64px; outline:0;} #contents.c_sub .cs_contact .csc_section input, #contents.c_sub .cs_contact .csc_section textarea, #contents.c_sub .cs_contact .csc_section .csc_form .cscf_wrap, #contents.c_sub .cs_contact .csc_section .csc_form .g-recaptcha, #contents.c_sub .cs_contact .csc_section .csc_form.radio ul {width:calc(100% - 143px);} #contents.c_sub .cs_contact .csc_section p.tip {display:inline-block; vertical-align:middle; width:100%; font-family:"Pretendard"; font-size:14px; font-weight:500; line-height:25px; letter-spacing:-0.56px; word-break:keep-all; text-align:left; opacity:0.5;} #contents.c_sub .cs_contact .csc_section p.tip span {display:inline-block;} #contents.c_sub .cs_contact #csca_contactForm, #contents.c_sub .cs_contact #csco_contactForm {display:inline-block; vertical-align:middle; width:100%; margin-top:40px;} #contents.c_sub .cs_contact .csc_section .csc_form {display:flex; flex-direction:row; flex-wrap:nowrap; align-items:flex-start; justify-content:flex-start; gap:30px;} #contents.c_sub .cs_contact .csc_section .csc_form + .csc_form {margin-top:20px;} #contents.c_sub .cs_contact .csc_section .csc_form .cscf_wrap {display:inline-block; vertical-align:middle; text-align:left;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .form_download_btn {display:flex; vertical-align:middle; width:100%; height:50px; margin-bottom:15px; border-radius:5px; background-color:#231F20; font-family:"Pretendard"; font-size:16px; font-weight:700; line-height:30px; letter-spacing:-0.64px; word-break:keep-all; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:center; gap:5px;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .form_download_btn i {display:inline-block; vertical-align:middle; width:18px; height:18px; background-image:url("/images/common/icon_download.svg"); background-repeat:no-repeat; background-size:100% auto; background-position:center; aspect-ratio:1/1;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 a:hover, #contents.c_sub .cs_contact .csc_section .csc_form.t2 a:link, #contents.c_sub .cs_contact .csc_section .csc_form.t2 a:visited, #contents.c_sub .cs_contact .csc_section .csc_form.t2 a:focus {color:#fff;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscaf_input_wrap {display:inline-block; vertical-align:middle; overflow:hidden; width:100%; padding:30px 0 5px;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscaf_input_wrap + .cscaf_input_wrap {padding-top:0;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscafi_box {display:flex; vertical-align:middle; float:left; width:calc(100% - 55px); flex-direction:row; flex-wrap:nowrap; align-items:center; gap:10px;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscafi_box .cscafi_filename {width:calc(100% - 110px);} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscafi_box .cscafi_file {display:inline-block; vertical-align:middle; width:100px; padding:10px 0; border-radius:5px; background-color:#231F20; text-align:center; font-family:"Pretendard"; font-size:16px; font-weight:500; color:#fff; line-height:30px; letter-spacing:-0.64px; word-break:keep-all;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscafi_duplication {display:inline-block; vertical-align:middle; float:left; position:relative; box-sizing:border-box; width:50px; height:50px; margin-left:5px; border-radius:5px; border:1px solid #231F20;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscafi_duplication:before {content:''; display:inline-block; vertical-align:middle; position:absolute; top:50%; left:50%; width:14px; height:2px; margin-top:-1px; margin-left:-7px; background-color:#231F20;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscafi_duplication:after {content:''; display:inline-block; vertical-align:middle; position:absolute; top:50%; left:50%; width:2px; height:14px; margin-top:-7px; margin-left:-1px; background-color:#231F20;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscafi_duplication.remove {display:none;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscafi_duplication.remove:after {display:none;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscaf_input_wrap + .cscaf_input_wrap .add {display:none;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscaf_input_wrap + .cscaf_input_wrap .remove {display:inline-block;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscof_input_wrap {display:inline-block; vertical-align:middle; overflow:hidden; width:100%; padding:0 0 5px;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscof_input_wrap + .cscof_input_wrap {padding-top:0;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscofi_box {display:flex; vertical-align:middle; float:left; width:calc(100% - 55px); flex-direction:row; flex-wrap:nowrap; align-items:center; gap:10px;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscofi_box .cscofi_filename {width:calc(100% - 110px);} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscofi_box .cscofi_file {display:inline-block; vertical-align:middle; width:100px; padding:10px 0; border-radius:5px; background-color:#231F20; text-align:center; font-family:"Pretendard"; font-size:16px; font-weight:500; color:#fff; line-height:30px; letter-spacing:-0.64px; word-break:keep-all;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscofi_duplication {display:inline-block; vertical-align:middle; float:left; position:relative; box-sizing:border-box; width:50px; height:50px; margin-left:5px; border-radius:5px; border:1px solid #231F20;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscofi_duplication:before {content:''; display:inline-block; vertical-align:middle; position:absolute; top:50%; left:50%; width:14px; height:2px; margin-top:-1px; margin-left:-7px; background-color:#231F20;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscofi_duplication:after {content:''; display:inline-block; vertical-align:middle; position:absolute; top:50%; left:50%; width:2px; height:14px; margin-top:-7px; margin-left:-1px; background-color:#231F20;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscofi_duplication.remove {display:none;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscofi_duplication.remove:after {display:none;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscof_input_wrap + .cscof_input_wrap .add {display:none;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscof_input_wrap + .cscof_input_wrap .remove {display:inline-block;} #contents.c_sub .cs_contact .csc_section .csc_form.t3 strong {margin-top:25px;} #contents.c_sub .cs_contact .csc_section .csc_form.t3 .g-recaptcha {display:inline-block; vertical-align:middle;} #contents.c_sub .cs_contact .csc_section .csc_form.t4 .cscf_wrap {box-sizing:border-box; position:relative; padding:10px 0 10px 32px;} #contents.c_sub .cs_contact .csc_section .csc_form.t4 .cscf_wrap input {display:inline-block; vertical-align:middle; position:absolute; top:14px; left:0; width:22px; height:22px; padding:0;} #contents.c_sub .cs_contact .csc_section .csc_form.t4 .cscf_wrap label {display:inline-block; vertical-align:middle; position:absolute; top:14px; left:0; width:22px; height:22px; padding:0;} #contents.c_sub .cs_contact .csc_section .csc_form.t4 .cscf_wrap span {font-family:"Pretendard"; font-size:16px; font-weight:700; line-height:30px; letter-spacing:-0.64px; word-break:keep-all;} #contents.c_sub .cs_contact .csc_section .csc_form.t4 .cscf_wrap span #privacy_btn01, #contents.c_sub .cs_contact .csc_section .csc_form.t4 .cscf_wrap span #privacy_btn02 {color:#3843D0; text-decoration:underline; text-underline-position:under;} #contents.c_sub .cs_contact .csc_section .csc_form.radio ul {display:inline-block; vertical-align:middle; padding:10px 0; text-align:left;} #contents.c_sub .cs_contact .csc_section .csc_form.radio li {display:inline-block; vertical-align:middle; width:auto;} #contents.c_sub .cs_contact .csc_section .csc_form.radio li + li {margin-left:30px;} #contents.c_sub .cs_contact .csc_section .csc_form.radio li label {display:inline-block; vertical-align:middle; position:relative; padding-left:32px; font-size:16px; font-weight:700; line-height:30px; letter-spacing:-0.64px; word-break:keep-all;} #contents.c_sub .cs_contact .csc_section .csc_form.radio li label:before {content:''; display:inline-block; vertical-align:middle; position:absolute; top:4px; left:0; width:22px; height:22px; background-image:url("/images/common/icon_radio.svg"); background-repeat:no-repeat; background-size:100% auto; background-position:center; aspect-ratio:1/1;} #contents.c_sub .cs_contact .csc_section .csc_form.radio li input:checked + label {color:#3843D0;} #contents.c_sub .cs_contact .csc_section .csc_form.radio li input:checked + label:before {background-image:url("/images/common/icon_radio_selected.svg");} #contents.c_sub .cs_contact .csc_section .csc_form_btn {display:flex; vertical-align:middle; width:100%; margin-top:60px; flex-direction:row; flex-wrap:nowrap; align-items:flex-start; justify-content:center; gap:10px;} /* 페이징 */ #contents.c_sub .cs_list .csl_pg {display:inline-block; vertical-align:middle; margin-top:60px;} #contents.c_sub .cs_list .csl_pg .pg_wrap {display:flex; gap:10px;} #contents.c_sub .cs_list .csl_pg .pg_page {display:inline-block; vertical-align:middle; width:40px; height:40px; border-radius:5px; font-size:16px; font-weight:600; color:#231F20 !important; line-height:40px; letter-spacing:-0.64px;} #contents.c_sub .cs_list .csl_pg .pg_page i {background-repeat:no-repeat; background-size:40px auto; background-position:center;} #contents.c_sub .cs_list .csl_pg .pg_page:hover, #contents.c_sub .cs_list .csl_pg .pg_current {color:#fff !important; background-color:#231F20;} #contents.c_sub .cs_list .csl_pg .pg_left {display:inline-block; vertical-align:middle;} #contents.c_sub .cs_list .csl_pg .pg_center {display:flex; vertical-align:middle; gap:10px;} #contents.c_sub .cs_list .csl_pg .pg_right {display:inline-block; vertical-align:middle;} #contents.c_sub .cs_list .csl_pg .pg_start i {display:inline-block; vertical-align:middle; width:100%; background-image:url("/images/common/icon_paging_start.svg"); aspect-ratio:1/1;} #contents.c_sub .cs_list .csl_pg .pg_prev i {display:inline-block; vertical-align:middle; width:100%; background-image:url("/images/common/icon_paging_prev.svg"); aspect-ratio:1/1;} #contents.c_sub .cs_list .csl_pg .pg_end i {display:inline-block; vertical-align:middle; width:100%; background-image:url("/images/common/icon_paging_end.svg"); aspect-ratio:1/1;} #contents.c_sub .cs_list .csl_pg .pg_next i {display:inline-block; vertical-align:middle; width:100%; background-image:url("/images/common/icon_paging_next.svg"); aspect-ratio:1/1;} #contents.c_sub .cs_list .csl_pg .pg_start:hover i, #contents.c_sub .cs_list .csl_pg .pg_prev:hover i, #contents.c_sub .cs_list .csl_pg .pg_end:hover i, #contents.c_sub .cs_list .csl_pg .pg_next:hover i {filter:invert(99%) sepia(99%) saturate(81%) hue-rotate(32deg) brightness(110%) contrast(101%);} /* 목록 type1 */ #contents.c_sub .cs_list.t1 {margin-top:-60px; margin-bottom:-60px; font-size:0; line-height:0; word-break:keep-all;} #contents.c_sub .cs_list.t1 ul {display:flex; flex-wrap:wrap;} #contents.c_sub .cs_list.t1 li {display:flex; box-sizing:border-box; width:25%; padding:clamp(25px, 3.125vw, 60px);} #contents.c_sub .cs_list.t1 li .csl_box {display:inline-block; vertical-align:middle; width:100%;} #contents.c_sub .cs_list.t1 li .csl_pic {display:inline-block; vertical-align:middle; position:relative; overflow:hidden; width:100%; border-radius:5px; background-repeat:no-repeat; background-size:cover; background-position:center center; aspect-ratio:1/1; box-shadow:0px 30px 60px 0px #12121426; transform:scale(1); transition:0.3s;} #contents.c_sub .cs_list.t1 li .csl_pic:hover {box-shadow:0px 50px 100px 0px #12121459; transform:scale(1.1);} #contents.c_sub .cs_list.t1 li .csl_pic .cslp_info {display:inline-block; vertical-align:middle; position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(56, 67, 208, 0.8); transform:scale(2); opacity:0; transition:0.3s; -webkit-transition:0.3s;} #contents.c_sub .cs_list.t1 li .csl_pic:hover .cslp_info {transform:scale(1); opacity:1;} #contents.c_sub .cs_list.t1 li .csl_pic .cslp_info:before {content:""; position:absolute; right:20px; top:20px; width:24px; height:30px; background-image:url("../images/common/logo_w.svg"); background-repeat:no-repeat; background-size:100% auto;} #contents.c_sub .cs_list.t1 li .csl_pic .cslp_info a {display:inline-block; vertical-align:middle; position:absolute; left:0; top:0; z-index:1; width:100%; height:100%;} #contents.c_sub .cs_list.t1 li .csl_pic .cslp_info img {display:inline-block; vertical-align:middle; position:absolute; left:50%; top:50%; width:130px; height:40px; margin-left:-65px; margin-top:-20px;} #contents.c_sub .cs_list.t1 li .csl_info {display:inline-block; vertical-align:middle; width:100%; margin-top:clamp(20px, 1.5625vw, 30px); text-align:left;} #contents.c_sub .cs_list.t1 li .csl_info strong {display:inline-block; vertical-align:middle; margin-right:8px; font-family:"Pretendard"; font-size:clamp(20px, 1.3021vw, 25px); font-weight:600; color:#231F20; line-height:clamp(35px, 2.0833vw, 40px); letter-spacing:1px; word-break:keep-all;} #contents.c_sub .cs_list.t1 li .csl_info span {display:inline-block; vertical-align:middle; font-size:clamp(12px, 0.7292vw, 14px); font-weight:500; color:#231F20; line-height:30px; letter-spacing:-0.5px; opacity:0.3; word-break:keep-all; text-transform:uppercase;} /* 상세 type1 */ #contents.c_sub .cs_view.t1 .csv_info {display:inline-block; vertical-align:middle; width:100%; margin-bottom:60px;} #contents.c_sub .cs_view.t1 .csv_info > div {display:inline-block; vertical-align:middle; position:relative; width:calc(50% - 60px);} #contents.c_sub .cs_view.t1 .csv_popup_bg {display:inline-block; vertical-align:middle; position:fixed; top:-50%; bottom:-50%; left:-50%; right:-50%; z-index:1000; background-color:rgba(0,0,0,0.75); opacity:0; pointer-events:none; transition:0.3s all;} #contents.c_sub .cs_view.t1 .csv_popup.on + .csv_popup_bg {opacity:1; pointer-events:auto;} #contents.c_sub .cs_view.t1 .csv_popup {display:flex; position:fixed; left:0; right:0; top:-100%; z-index:1001; height:100vh; transition:0.3s all; pointer-events:none; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:center;} #contents.c_sub .cs_view.t1 .csv_popup.on {top:0;} #contents.c_sub .cs_view.t1 .csv_popup .csv_popup_wrap {display:flex; max-width:90%; max-height:95%; flex-direction:column; flex-wrap:nowrap; justify-content:center; align-items:center; aspect-ratio:1/1;} #contents.c_sub .cs_view.t1 .csv_popup .csv_popup_wrap i {display:inline-block; vertical-align:middle; width:60px; height:60px; margin-top:60px; border-radius:50%; background-color:#3843D0; background-image:url("/images/common/btn_close_popup.svg"); background-repeat:no-repeat; background-size:100% auto; background-position:center; aspect-ratio:1/1; cursor:pointer; pointer-events:auto; transition:0.3s all;} #contents.c_sub .cs_view.t1 .csv_popup .csv_popup_wrap i:hover {transform:rotate(90deg);} #contents.c_sub .cs_view.t1 .csv_popup img {max-width:100%; max-height:calc(100% - 120px);} #contents.c_sub .cs_view.t1 .csv_info .csvi_pic {overflow:hidden; float:left; position:sticky; position:-webkit-sticky; top:180px; border-radius:5px; background-repeat:no-repeat; background-size:cover; background-position:center; aspect-ratio:1/1; box-shadow:0px 30px 60px 0px #12121426; cursor:pointer;} #contents.c_sub .cs_view.t1 .csv_info .csvi_pic img {position:absolute; left:0; right:0; top:0; bottom:0; opacity:0;} #contents.c_sub .cs_view.t1 .csv_info .csvi_wrap {float:right;} #contents.c_sub .cs_view.t1 .csv_info .csvi_name {display:inline-block; vertical-align:middle; width:100%; margin-bottom:10px; font-size:20px; font-weight:500; color:#231F20; line-height:30px; letter-spacing:-0.7px; opacity:0.3; text-align:left; word-break:keep-all;} #contents.c_sub .cs_view.t1 .csv_info .csvi_name.ko {margin:10px 0; font-family:"Pretendard"; font-size:80px; font-weight:600; line-height:90px; letter-spacing:3px; opacity:1; word-break:keep-all;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content {display:inline-block; vertical-align:middle; width:100%; padding:30px 0; border-bottom:#E6E7E8 solid 1px; text-align:left;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content.t1 {border-top:#E6E7E8 solid 1px; margin-top:30px;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content > strong {display:inline-block; vertical-align:middle; position:relative; width:100%; font-size:30px; font-weight:600; color:#231F20; line-height:40px; letter-spacing:-0.5px; cursor:pointer; word-break:keep-all;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content.t1 > strong {cursor:initial;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content.t1 > strong i {display:none;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content > strong:hover i {border:2px solid rgba(35, 31, 32, 1);} #contents.c_sub .cs_view.t1 .csv_info .csvi_content > strong i {position:absolute; right:0; top:50%; margin-top:-20px; border-radius:9px; box-sizing:border-box; width:40px; border:2px solid rgba(35, 31, 32, 0.1); aspect-ratio:1/1; transition:0.3x;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content > strong i:before {content:""; position:absolute; left:50%; top:50%; width:20px; height:20px; margin-left:-10px; margin-top:-10px; background-image:url("../images/common/icon_arrow.svg"); background-repeat:no-repeat; background-size:100% auto; transform:rotate(180deg);} #contents.c_sub .cs_view.t1 .csv_info .csvi_content > strong.on i:before {transform:rotate(0);} #contents.c_sub .cs_view.t1 .csv_info .csvi_content > ul {display:none; position:relative; box-sizing:border-box; width:100%; padding-left:10px; margin-top:20px;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content > strong.on + ul {display:inline-block; vertical-align:middle;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content.t1 > ul {display:inline-block !important;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content > ul > li {display:inline-block; vertical-align:middle; position:relative; box-sizing:border-box; width:100%; padding-left:95px;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content > ul > li + li {margin-top:5px;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content > ul > li > strong {display:inline-block; vertical-align:middle; position:absolute; left:0; top:0; padding-left:10px; font-family:"Pretendard"; font-size:14px; font-weight:600; color:#231F20; line-height:30px; word-break:keep-all;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content > ul > li > strong:before {content:""; position:absolute; left:0; top:50%; width:4px; margin-top:-2px; background-color:#3843D0; border-radius:50%; aspect-ratio:1/1} #contents.c_sub .cs_view.t1 .csv_info .csvi_content > ul > li > span {display:inline-block; vertical-align:middle; width:100%; padding:3px 0; word-break:keep-all; font-size:14px; font-weight:400; color:#231F2080; line-height:24px; letter-spacing:-0.5px;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content > ul > li > span a.sns {display:inline-block; vertical-align:middle; position:relative; float:left; width:30px; margin-right:10px; aspect-ratio:1/1} #contents.c_sub .cs_view.t1 .csv_info .csvi_content > ul > li > span a.sns i {position:absolute; left:0; right:0; top:0; bottom:0; z-index:0; background-image:url("/images/artists/icon_sns_artist.svg"); background-repeat:no-repeat; background-size:200% auto;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content > ul > li > span a.sns.blog i {background-position:left 0;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content > ul > li > span a.sns.instar i {background-position:left 33.333%;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content > ul > li > span a.sns.youtube i {background-position:left 66.666%;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content > ul > li > span a.sns.x i {background-position:left 100%;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content > ul > li > span a.sns.blog:hover i {background-position:right 0;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content > ul > li > span a.sns.instar:hover i {background-position:right 33.333%;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content > ul > li > span a.sns.youtube:hover i {background-position:right 66.666%;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content > ul > li > span a.sns.x:hover i {background-position:right 100%;} #contents.c_sub .cs_view.t1 .csv_buttons {display:inline-block; vertical-align:middle; width:100%; margin-bottom:60px;} #contents.c_sub .cs_view.t1 .csv_pic .grid {display:flex; margin-left:-40px; flex-wrap:wrap} #contents.c_sub .cs_view.t1 .csv_pic .grid-item {width:calc(33.3333% - 40px); margin-left:40px; margin-bottom:40px;} #contents.c_sub .cs_view.t1 .csv_pic .grid-item > div {position:relative; top:0; transition:0.3s all;} #contents.c_sub .cs_view.t1 .csv_pic .grid-item > div:hover {top:-5px;} #contents.c_sub .cs_view.t1 .csv_pic .grid-item img {width:100%; height:auto; display:block; border-radius:5px; box-shadow:0px 30px 60px 0px #12121426; cursor:pointer;} #contents.c_sub .cs_view.t1 .csvp_popup_bg {display:inline-block; vertical-align:middle; position:fixed; top:-50%; bottom:-50%; left:-50%; right:-50%; z-index:1000; background-color:rgba(0,0,0,0.75); opacity:0; pointer-events:none; transition:0.3s all;} #contents.c_sub .cs_view.t1 .csvp_popup.on + .csvp_popup_bg {opacity:1; pointer-events:auto;} #contents.c_sub .cs_view.t1 .csvp_popup {display:flex; position:fixed; left:0; right:0; top:-100%; z-index:1001; height:100vh; transition:0.3s all; pointer-events:none; flex-direction:column; flex-wrap:nowrap; justify-content:center; align-items:center;} #contents.c_sub .cs_view.t1 .csvp_popup i {display:inline-block; vertical-align:middle; width:60px; height:60px; margin-top:60px; border-radius:50%; background-color:#3843D0; background-image:url("/images/common/btn_close_popup.svg"); background-repeat:no-repeat; background-size:100% auto; background-position:center; aspect-ratio:1/1; cursor:pointer; pointer-events:auto; transition:0.3s all;} #contents.c_sub .cs_view.t1 .csvp_popup i:hover {transform:rotate(90deg);} #contents.c_sub .cs_view.t1 .csvp_popup.on {top:0;} #contents.c_sub .cs_view.t1 .csvp_popup_content {max-width:95%; max-height:calc(95% - 120px);} /* 목록 type2 */ #contents.c_sub .cs_list.t2 {display:inline-block; vertical-align:middle; width:100%;} #contents.c_sub .cs_list.t2 .heightauto {height:auto !important;} #contents.c_sub .cs_list.t2 > ul {display:flex; margin-left:-40px; flex-wrap:wrap;} #contents.c_sub .cs_list.t2 > ul > li {display:inline-block; vertical-align:middle; float:left; width:calc(20% - 40px); margin-bottom:40px; margin-left:40px;} #contents.c_sub .cs_list.t2 > ul > li .csl_box {display:inline-block; vertical-align:middle; position:relative; top:0; width:100%; border-radius:5px; background-color:#fff; box-shadow:0 30px 60px #1212140F; transition:0.3s all;} #contents.c_sub .cs_list.t2 > ul > li .csl_box:hover {top:-5px;} #contents.c_sub .cs_list.t2 > ul > li .csl_box > button {width:100%;} #contents.c_sub .cs_list.t2 > ul > li .csl_box > a {display:inline-block; vertical-align:middle; width:100%;} #contents.c_sub .cs_list.t2 > ul > li .icon_yt {position:relative;} #contents.c_sub .cs_list.t2 > ul > li .icon_yt:before {content:''; display:inline-block; vertical-align:middle; position:absolute; top:10px; right:10px; width:32px; background-image:url("/images/common/icon_youtube.svg"); background-repeat:no-repeat; background-size:100% auto; background-position:center; aspect-ratio:1/1;} #contents.c_sub .cs_list.t2 > ul > li .csl_pic {display:inline-block; vertical-align:middle; overflow:hidden; width:100%; border-radius:5px 5px 0 0;} #contents.c_sub .cs_list.t2 > ul > li .csl_pic img {width:100%;} #contents.c_sub .cs_list.t2 > ul > li .csl_info {display:inline-block; vertical-align:middle; box-sizing:border-box; width:100%; padding:15px 25px; text-align:left;} #contents.c_sub .cs_list.t2 > ul > li .csl_info .cate {display:inline-block; vertical-align:middle; box-sizing:border-box; width:auto; margin-bottom:5px; padding:0 8px; border-radius:2px; background-color:#3843D0; font-family:"Pretendard"; font-size:12px; font-weight:700; color:#F4F3F7; line-height:20px; word-break:keep-all;} #contents.c_sub .cs_list.t2 > ul > li .csl_info .cate + i {display:inline-block; vertical-align:middle; box-sizing:border-box; width:auto; margin-bottom:5px; margin-left:5px; padding:0 8px; border-radius:2px; background-color:#231F20; font-family:"Pretendard"; font-size:12px; font-weight:700; line-height:20px; color:#fff; letter-spacing:-0.48px;} #contents.c_sub .cs_list.t2 > ul > li .csl_info .title {display:-webkit-box; display:-ms-flexbox; display:box; vertical-align:top; overflow:hidden; width:100%; max-height:90px; word-break:keep-all; font-family:"Pretendard"; font-weight:600; color:#231F20; line-height:30px; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:3} #contents.c_sub .cs_list.t2 > ul > li .csl_info .title.t1 {font-size:25px; letter-spacing:-0.8px;} #contents.c_sub .cs_list.t2 > ul > li .csl_info .title.t2 {font-size:20px; letter-spacing:-0.8px;} #contents.c_sub .cs_list.t2 > ul > li .csl_info .date {display:inline-block; vertical-align:middle; width:100%; margin-top:15px; font-size:16px; font-weight:600; line-height:30px; color:#231F20; letter-spacing:-0.64px; text-align:left; opacity:0.5;} #contents.c_sub .cs_list.t2 > ul > li .csl_artists {display:flex; box-sizing:border-box; position:relative; width:100%; padding:15px 25px; border-top:1px solid #F4F3F7; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; gap:5px;} #contents.c_sub .cs_list.t2 > ul > li .csl_artists > strong {display:inline-block; vertical-align:middle; width:100%; font-size:15px; font-weight:700; line-height:30px; letter-spacing:-0.6px; text-align:left; cursor:pointer;} #contents.c_sub .cs_list.t2 > ul > li .csl_artists > strong > span + i {display:inline-block; vertical-align:middle; float:right; width:26px; margin:2px; background-image:url("/images/justus/icon_artists.svg"); background-repeat:no-repeat; background-size:100% auto; background-position:center; aspect-ratio:1/1; transition:0.3s all;} #contents.c_sub .cs_list.t2 > ul > li .csl_artists:hover strong {text-decoration:underline; text-underline-position:under;} #contents.c_sub .cs_list.t2 > ul > li .csl_artists:hover span + i {transform:scale(1.1);} #contents.c_sub .cs_list.t2 > ul > li .csl_artists > p, #contents.c_sub .cs_list.t2 > ul > li .csl_artists > a {display:inline-block; vertical-align:middle; box-sizing:border-box; width:auto; padding:0 12px; border-radius:50px; background-color:#F4F3F7; font-family:"Pretendard"; font-size:14px; font-weight:500; color:#231F20; line-height:30px; word-break:keep-all;} #contents.c_sub .cs_list.t2 > ul > li .csl_artists > a:hover {background-color:#3843D0; color:#fff;} #contents.c_sub .cs_list.t2 > ul > li .csl_artists .csla_popup + .csla_popup_bg {display:none; position:fixed; top:0; bottom:0; left:0; right:0; z-index:1;} #contents.c_sub .cs_list.t2 > ul > li .csl_artists .csla_popup + .csla_popup_bg.on {display:inline-block;} #contents.c_sub .cs_list.t2 > ul > li .csl_artists .csla_popup {display:none; vertical-align:middle; box-sizing:border-box; position:absolute; top:50%; left:calc(100% + 12px); z-index:2; width:290px; padding:10px; border-radius:5px; background-color:#fff; box-shadow:0px 30px 60px 0px rgba(18, 18, 20, 0.35); transform:translateY(-50%); cursor:auto;} #contents.c_sub .cs_list.t2 > ul > li .csl_artists .csla_popup:before {content:''; display:inline-block; vertical-align:middle; position:absolute; top:50%; left:0; width:14px; height:14px; margin-top:2px; margin-left:-7px; background-color:#fff; transform:rotate(45deg) translate(-50%, -50%); transform-origin:50% 50%;} #contents.c_sub .cs_list.t2 > ul > li .csl_artists .csla_popup strong {display:inline-block; vertical-align:middle; width:100%;} #contents.c_sub .cs_list.t2 > ul > li .csl_artists .csla_popup strong span {display:inline-block; vertical-align:middle; float:left; width:auto; font-size:16px; font-weight:700; line-height:30px; letter-spacing:-0.64px; text-align:left;} #contents.c_sub .cs_list.t2 > ul > li .csl_artists .csla_popup strong i {display:inline-block; vertical-align:middle; float:right; width:30px; background-image:url("/images/justus/icon_close_popup.svg"); background-repeat:no-repeat; background-size:100% auto; background-position:center; aspect-ratio:1/1; cursor:pointer;} #contents.c_sub .cs_list.t2 > ul > li .csl_artists .csla_popup ul {display:flex; position:relative; margin-top:20px; flex-direction:row; flex-wrap:wrap; gap:10px;} #contents.c_sub .cs_list.t2 > ul > li .csl_artists .csla_popup ul:before {content:''; display:inline-block; vertical-align:middle; position:absolute; top:-10px; left:0; right:0; width:auto; height:1px; background-color:#231F20; opacity:0.2;} #contents.c_sub .cs_list.t2 > ul > li .csl_artists .csla_popup ul li {display:inline-block; vertical-align:middle; box-sizing:border-box; width:auto; padding:0 12px; border-radius:50px; background-color:#F4F3F7; font-family:Pretendard; font-size:14px; font-weight:500; line-height:25px; letter-spacing:-0.56px; word-break:keep-all;} #contents.c_sub .cs_list.t2 > ul > li .csl_artists .csla_popup ul li a {color:#231F20;} #contents.c_sub .cs_list.t2 > ul > li .csl_artists .csla_popup ul li:hover {background-color:#3843D0; color:#fff;} #contents.c_sub .cs_list.t2 > ul > li .csl_artists .csla_popup ul li:hover a {color:#fff;} #contents.c_sub .cs_list.t2.nc > ul > li .csl_artists .csla_popup ul li:hover {background-color:#F4F3F7; color:#231F20;} #contents.c_sub .cs_list.t2.nc > ul > li .csl_artists .csla_popup ul li:hover a {color:#231F20;} #contents.c_sub .cs_list.t2 > ul > li .csl_artists .csla_popup.t2 {left:auto; right:calc(100% + 12px);} #contents.c_sub .cs_list.t2 > ul > li .csl_artists .csla_popup.t2:before {left:auto; right:0; margin-left:0; margin-right:-7px;} #contents.c_sub .cs_list.t2 > ul > li .csl_artists .csla_popup.on {display:inline-block;} #contents.c_sub .cs_list.row > ul {width:420px; margin:0 auto;} #contents.c_sub .cs_list.row > ul > li {position:relative !important; top:0 !important; left:0 !important; width:100%; margin-left:0;} /* 상세 type2 */ #contents.c_sub .cs_view.t2 .csv_info {display:inline-block; vertical-align:middle; width:100%; margin-bottom:60px;} #contents.c_sub .cs_view.t2 .csv_popup_bg {display:inline-block; vertical-align:middle; position:fixed; top:-50%; bottom:-50%; left:-50%; right:-50%; z-index:1000; background-color:rgba(0,0,0,0.75); opacity:0; pointer-events:none; transition:0.3s all;} #contents.c_sub .cs_view.t2 .csv_popup.on + .csv_popup_bg {opacity:1; pointer-events:auto;} #contents.c_sub .cs_view.t2 .csv_popup {display:flex; position:fixed; left:0; right:0; top:-100%; z-index:1001; height:100vh; transition:0.3s all; pointer-events:none; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:center;} #contents.c_sub .cs_view.t2 .csv_popup.on {top:0;} #contents.c_sub .cs_view.t2 .csv_popup .csv_popup_wrap {display:flex; max-width:80%; max-height:80%; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:center; aspect-ratio:1/1;} #contents.c_sub .cs_view.t2 .csv_popup img {max-width:100%; max-height:100%;} #contents.c_sub .cs_view.t2 .csv_info > div {display:inline-block; vertical-align:middle; position:relative; width:calc(50% - 60px);} #contents.c_sub .cs_view.t2 .csv_info .csvi_pic {display:flex; justify-content:center; align-items:center; overflow:hidden; float:left; position:sticky; position:-webkit-sticky; top:180px; border-radius:5px; background-repeat:no-repeat; background-size:cover; background-position:center; aspect-ratio:1/1; box-shadow:0px 30px 60px 0px #12121426; cursor:pointer;} #contents.c_sub .cs_view.t2 .csv_info .csvi_pic:before {content:''; display:inline-block; vertical-align:middle; position:absolute; top:0; bottom:0; left:0; right:0; z-index:1; background-color:#231F2066;} #contents.c_sub .cs_view.t2 .csv_info .csvi_pic.basic {cursor:auto;} #contents.c_sub .cs_view.t2 .csv_info .csvi_pic.nc {cursor:auto;} #contents.c_sub .cs_view.t2 .csv_info .csvi_pic img {width:100%;} #contents.c_sub .cs_view.t2 .csv_info .csvi_pic img.back {position:absolute; top:50%; left:50%; z-index:0; width:145%; filter:blur(17px); object-fit:cover; transform:translate(-50%, -50%);} #contents.c_sub .cs_view.t2 .csv_info .csvi_pic img.front {position:absolute; top:50%; left:0; width:100%; z-index:2; object-fit:contain; transform:translateY(-50%);} #contents.c_sub .cs_view.t2 .csv_info .csvi_pic.t2 img.front {position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; object-fit:contain; transform:none;} #contents.c_sub .cs_view.t2 .csv_info .csvi_wrap {float:right;} #contents.c_sub .cs_view.t2 .csv_info .csvi_cate {display:inline-block; vertical-align:middle; float:left; box-sizing:border-box; width:auto; padding:0 8px; border-radius:2px; background-color:#3843D0; font-family:"Pretendard"; font-size:12px; font-weight:700; color:#F4F3F7; line-height:20px; word-break:keep-all;} #contents.c_sub .cs_view.t2 .csv_info .csvi_cate + i {display:inline-block; vertical-align:middle; float:left; box-sizing:border-box; width:auto; margin-left:5px; padding:0 8px; border-radius:2px; background-color:#231F20; font-family:"Pretendard"; font-size:12px; font-weight:700; line-height:20px; color:#fff; letter-spacing:-0.48px;} #contents.c_sub .cs_view.t2 .csv_info .csvi_cate.t1 {border:1px solid #3843D0; background-color:#fff; color:#3843D0;} #contents.c_sub .cs_view.t2 .csv_info .csvi_name {display:inline-block; vertical-align:middle; width:100%; margin-bottom:10px; font-size:20px; font-weight:500; color:#231F20; line-height:30px; letter-spacing:-0.7px; opacity:0.3; text-align:left; word-break:keep-all;} #contents.c_sub .cs_view.t2 .csv_info .csvi_name.ko {margin:10px 0; font-family:"Pretendard"; font-size:80px; font-weight:600; line-height:90px; letter-spacing:3px; opacity:1; word-break:keep-all;} #contents.c_sub .cs_view.t2 .csv_info .csvi_title {display:inline-block; vertical-align:middle; width:100%; margin:15px 0 10px; font-family:"Pretendard"; font-size:50px; font-weight:700; color:#231F20; line-height:60px; letter-spacing:-2px; text-align:left; word-break:keep-all;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content {display:inline-block; vertical-align:middle; width:100%; padding:30px 0; border-bottom:#E6E7E8 solid 1px; text-align:left;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content.t1, #contents.c_sub .cs_view.t2 .csv_info .csvi_content.t2 {border-top:#E6E7E8 solid 1px; margin-top:30px;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content > strong {display:inline-block; vertical-align:middle; position:relative; width:100%; font-size:30px; font-weight:600; color:#231F20; line-height:40px; letter-spacing:-0.5px; cursor:pointer; word-break:keep-all;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content.t1 > strong, #contents.c_sub .cs_view.t2 .csv_info .csvi_content.t2 > strong, #contents.c_sub .cs_view.t2 .csv_info .csvi_content.t3 > strong {cursor:initial;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content.t1 > strong i {display:none;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content > strong:hover i {border:2px solid rgba(35, 31, 32, 1);} #contents.c_sub .cs_view.t2 .csv_info .csvi_content > strong i {position:absolute; right:0; top:50%; margin-top:-20px; border-radius:9px; box-sizing:border-box; width:40px; border:2px solid rgba(35, 31, 32, 0.1); aspect-ratio:1/1; transition:0.3x;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content > strong i:before {content:""; position:absolute; left:50%; top:50%; width:20px; height:20px; margin-left:-10px; margin-top:-10px; background-image:url("../images/common/icon_arrow.svg"); background-repeat:no-repeat; background-size:100% auto; transform:rotate(180deg);} #contents.c_sub .cs_view.t2 .csv_info .csvi_content > strong.on i:before {transform:rotate(0);} #contents.c_sub .cs_view.t2 .csv_info .csvi_content > ul {display:none; position:relative; box-sizing:border-box; width:100%; padding-left:10px; margin-top:20px;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content.t3 > ul {display:inline-block;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content > strong.on + ul {display:inline-block; vertical-align:middle;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content.t1 > ul {display:inline-block !important;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content > ul > li {display:inline-block; vertical-align:middle; position:relative; box-sizing:border-box; width:100%;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content.t1 > ul > li, #contents.c_sub .cs_view.t2 .csv_info .csvi_content.t2 > ul > li, #contents.c_sub .cs_view.t2 .csv_info .csvi_content.t4 > ul > li {padding-left:95px;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content > ul > li + li {margin-top:5px;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content > ul > li > strong {display:inline-block; vertical-align:middle; padding:3px 0; padding-left:10px; font-family:"Pretendard"; font-size:14px; font-weight:500; color:#231F20; line-height:24px; word-break:keep-all;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content > ul > li > strong:before {content:""; position:absolute; left:0; top:13px; width:4px; background-color:#3843D0; border-radius:50%; aspect-ratio:1/1} #contents.c_sub .cs_view.t2 .csv_info .csvi_content.t1 > ul > li > strong, #contents.c_sub .cs_view.t2 .csv_info .csvi_content.t2 > ul > li > strong, #contents.c_sub .cs_view.t2 .csv_info .csvi_content.t4 > ul > li > strong {position:absolute; left:0; top:0; font-weight:700;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content > ul > li span {display:inline-block; vertical-align:middle; width:100%; padding:3px 0; word-break:keep-all; font-size:14px; font-weight:400; color:#231F2080; line-height:24px; letter-spacing:-0.5px;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content > ul > li.onair span {width:auto;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content > ul > li.onair div {display:inline-block; position:relative; width:100%;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content > ul > li.onair span:first-child {position:relative; margin-right:21px;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content > ul > li.onair span:first-child:before {content:''; display:inline-block; vertical-align:middle; position:absolute; right:-10px; top:11px; width:1px; height:8px; background-color:#231F20; opacity:0.2;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content > ul > li > span button.url {display:inline-block; vertical-align:middle; position:relative; float:left; width:30px; margin-right:10px; aspect-ratio:1/1} #contents.c_sub .cs_view.t2 .csv_info .csvi_content > ul > li > span button.url i {position:absolute; left:0; right:0; top:0; bottom:0; z-index:0; background-image:url("/images/artists/icon_sns_artist.svg"); background-repeat:no-repeat; background-size:200% auto;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content > ul > li > span button.url.youtube i {background-position:left 66.666%;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content > ul > li > span button.url.youtube:hover i {background-position:right 66.666%;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content > ul > li > span button.url.go-page i {background-position:left 0;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content > ul > li > span button.url.go-page:hover i {background-position:right 0;} #contents.c_sub .cs_view.t2 .csv_buttons {display:inline-block; vertical-align:middle; width:100%;} #contents.c_sub .cs_view.t2 .csy_popup_bg {display:inline-block; vertical-align:middle; position:fixed; top:-50%; bottom:-50%; left:-50%; right:-50%; z-index:1000; background-color:rgba(0,0,0,0.75); opacity:0; pointer-events:none; transition:0.3s all;} #contents.c_sub .cs_view.t2 #cs_youtubePopup.on + .csy_popup_bg {opacity:1; pointer-events:auto;} #contents.c_sub .cs_view.t2 #cs_youtubePopup {display:flex; position:fixed; left:0; right:0; top:-100%; z-index:1001; height:100vh; transition:0.3s all; pointer-events:none; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:center;} #contents.c_sub .cs_view.t2 #cs_youtubePopup .csy_box {width:1024px; pointer-events:none;} #contents.c_sub .cs_view.t2 #cs_youtubePopup .csy_box iframe {border-radius:5px; box-shadow:0 20px 40px #12121480; background-color:#231F20; pointer-events:auto;} #contents.c_sub .cs_view.t2 #cs_youtubePopup .csy_box p {display:inline-block; vertical-align:middle; width:100%; margin-top:30px; font-family:"Pretendard"; font-size:16px; font-weight:500; color:#F4F3F7; line-height:30px; text-align:center; word-break:keep-all;} /* 목록 type3 */ #contents.c_sub .cs_list.t3 {display:inline-block; vertical-align:middle; width:100%;} #contents.c_sub .cs_list.t3 > ul {display:flex; flex-direction:row; flex-wrap:wrap; gap:40px;} #contents.c_sub .cs_list.t3 > ul > li {display:inline-block; vertical-align:middle; box-sizing:border-box; position:relative; top:0; width:calc(20% - 32px); padding:30px; border-radius:5px; background-color:#fff; box-shadow:0px 30px 60px 0px rgba(18, 18, 20, 0.06); aspect-ratio:1/1; transition:0.3s all;} #contents.c_sub .cs_list.t3 > ul > li:hover {top:-5px;} #contents.c_sub .cs_list.t3 > ul > li .csl_box {display:flex; vertical-align:middle; width:100%; height:100%; flex-direction:column; flex-wrap:nowrap; justify-content:space-between;} #contents.c_sub .cs_list.t3 > ul > li .csl_top.t1 {display:inline-block; vertical-align:middle; width:100%; height:calc(100% - 45px);} #contents.c_sub .cs_list.t3 > ul > li .csl_top .cslt_cate {display:inline-block; vertical-align:middle; width:100%; text-align:left;} #contents.c_sub .cs_list.t3 > ul > li .csl_top .cslt_cate i {display:inline-block; vertical-align:middle; box-sizing:border-box; padding:0 8px; border-radius:2px; border:1px solid #3843D0; font-size:12px; font-weight:700; line-height:18px; letter-spacing:-0.48px;} #contents.c_sub .cs_list.t3 > ul > li .csl_top .cslt_cate i.t1 {color:#3843D0;} #contents.c_sub .cs_list.t3 > ul > li .csl_top .cslt_cate i.t2 {border-color:#231F20; color:#231F20;} #contents.c_sub .cs_list.t3 > ul > li .csl_top .cslt_title {display:-webkit-box; display:-ms-flexbox; display:box; vertical-align:top; overflow:hidden; width:100%; height:auto; max-height:calc(100% - 35px); margin-top:15px; font-family:"Pretendard"; font-size:20px; font-weight:600; line-height:30px; color:#231F20; letter-spacing:-0.8px; text-align:left; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:5;} #contents.c_sub .cs_list.t3 > ul > li .csl_top .cslt_name.ko {display:inline-block; vertical-align:middle; width:100%; margin-top:15px; font-family:"Pretendard"; font-size:25px; font-weight:700; color:#231F20; line-height:35px; letter-spacing:2.5px; text-align:left;} #contents.c_sub .cs_list.t3 > ul > li .csl_top .cslt_name.en {display:inline-block; vertical-align:middle; width:100%; margin-top:5px; font-size:16px; font-style:normal; font-weight:600; color:#231F20; line-height:30px; letter-spacing:-0.64px; text-transform:uppercase; text-align:left; opacity:0.3;} #contents.c_sub .cs_list.t3 > ul > li .csl_info {display:inline-block; vertical-align:middle; width:100%; font-size:16px; font-weight:600; line-height:30px; letter-spacing:-0.64px; color:#231F20; opacity:0.5; text-align:left;} #contents.c_sub .cs_list.t3 > ul > li .csl_info span {display:inline-block; vertical-align:middle; float:left; width:100%;} #contents.c_sub .cs_list.t3 > ul > li .csl_winning {display:flex; overflow:hidden; width:100%; height:85px; flex-direction:column; flex-wrap:nowrap; gap:5px;} #contents.c_sub .cs_list.t3 > ul > li .csl_winning li {position:relative; overflow:hidden; box-sizing:border-box; padding-left:14px;} #contents.c_sub .cs_list.t3 > ul > li .csl_winning li:before {content:''; display:inline-block; vertical-align:middle; position:absolute; top:10px; left:0; width:4px; height:4px; border-radius:5px; background-color:#3843D0;} #contents.c_sub .cs_list.t3 > ul > li .csl_winning li strong {display:inline-block; vertical-align:middle; float:left; width:35px; margin-right:10px; font-family:"Pretendard"; font-size:14px; font-weight:600; line-height:25px; color:#231F20; letter-spacing:-0.56px; text-align:left;} #contents.c_sub .cs_list.t3 > ul > li .csl_winning li span {display:inline-block; vertical-align:middle; float:left; overflow:hidden; width:calc(100% - 45px); height:25px; font-family:"Pretendard"; font-size:14px; font-weight:500; line-height:25px; color:#231F20; letter-spacing:-0.56px; text-align:left; opacity:0.5; text-overflow:ellipsis; white-space:nowrap;} /* 상세 type3 */ #contents.c_sub .cs_view.t3 {display:inline-block; vertical-align:middle; box-sizing:border-box; width:100%; max-width:1400px; padding:60px; border-radius:5px; background-color:#fff; box-shadow:0px 30px 60px 0px rgba(18, 18, 20, 0.06);} #contents.c_sub .cs_view.t3 .csv_top {display:inline-block; vertical-align:middle; width:100%;} #contents.c_sub .cs_view.t3 .csv_top .cate {display:inline-block; vertical-align:middle; width:100%; text-align:left;} #contents.c_sub .cs_view.t3 .csv_top .cate i {display:inline-block; vertical-align:middle; box-sizing:border-box; padding:0 8px; border-radius:2px; border:1px solid #3843D0; font-size:12px; font-weight:700; line-height:18px; letter-spacing:-0.48px;} #contents.c_sub .cs_view.t3 .csv_top .cate i.t1 {color:#3843D0;} #contents.c_sub .cs_view.t3 .csv_top .cate i.t2 {border-color:#231F20; color:#231F20;} #contents.c_sub .cs_view.t3 .csv_top .title {display:inline-block; vertical-align:middle; width:100%; margin-top:10px; font-family:"Pretendard"; font-size:25px; font-weight:600; color:#231F20; line-height:35px; letter-spacing:-1px; text-align:left; word-break:break-word;} #contents.c_sub .cs_view.t3 .csv_top .info {display:inline-block; vertical-align:middle; width:100%; margin-top:10px; text-align:left;} #contents.c_sub .cs_view.t3 .csv_top .info .no {display:inline-block; vertical-align:middle; position:relative; margin-right:22px; font-family:"Pretendard"; font-size:16px; font-weight:700; color:#231F20; line-height:30px; letter-spacing:-0.64px; opacity:0.5;} #contents.c_sub .cs_view.t3 .csv_top .info .no:before {content:''; display:inline-block; vertical-align:middle; position:absolute; top:9px; right:-12px; width:2px; height:12px; background-color:#231F20; opacity:0.5;} #contents.c_sub .cs_view.t3 .csv_top .info .date {display:inline-block; vertical-align:middle; font-family:"Pretendard"; font-size:16px; font-weight:700; color:#231F20; line-height:30px; letter-spacing:-0.64px; opacity:0.5;} #contents.c_sub .cs_view.t3 .csv_top .link {display:inline-block; vertical-align:middle; width:100%; margin-top:10px; font-family:"Pretendard"; font-size:16px; font-weight:500; line-height:30px; letter-spacing:-0.64px; text-align:left;} #contents.c_sub .cs_view.t3 .csv_top .link:hover {text-decoration:underline;} #contents.c_sub .cs_view.t3 .csv_top .link i {display:inline-block; vertical-align:middle; float:left; width:24px; margin:3px 10px 3px 0; background-image:url("/images/common/icon_linked.svg"); background-repeat:no-repeat; background-size:100% auto; background-position:center; aspect-ratio:1/1;} #contents.c_sub .cs_view.t3 .csv_top .link p {display:inline-block; vertical-align:middle; float:left; width:65px;} #contents.c_sub .cs_view.t3 .csv_top .link p.t2 {width:35px;} #contents.c_sub .cs_view.t3 .csv_top .link a {display:inline-block; vertical-align:middle; float:left; width:auto; max-width:calc(100% - 100px); padding:3px 0; line-height:24px; word-break:break-all; color:#231F20;} #contents.c_sub .cs_view.t3 .csv_top .link a:hover {text-decoration:underline; text-underline-position:under;} #contents.c_sub .cs_view.t3 .csv_top.t2 .title {margin-top:0;} #contents.c_sub .cs_view.t3 .csv_content {display:inline-block; vertical-align:middle; position:relative; width:100%; margin-top:40px; padding:40px 0;} #contents.c_sub .cs_view.t3 .csv_content:before {content:''; display:inline-block; vertical-align:middle; position:absolute; top:0; left:0; right:0; width:auto; height:1px; background-color:#231F20;} #contents.c_sub .cs_view.t3 .csv_content .csvc_cont {display:inline-block; vertical-align:middle; width:100%; font-family:"Pretendard"; font-size:18px; font-weight:500; line-height:30px; color:#231F20; letter-spacing:-0.72px; text-align:left;} #contents.c_sub .cs_view.t3 .csv_content .csvc_cont img {display:block; vertical-align:middle; max-width:100%; margin:0 auto;} #contents.c_sub .cs_view.t3 .csv_content .csvc_cont p {display:inline-block; vertical-align:middle; width:100%; max-width:100% !important; margin:0 !important;} #contents.c_sub .cs_view.t3 .csv_content .csvc_cont b {font-weight:900;} #contents.c_sub .cs_view.t3 .csv_content .csvc_cont blockquote {display:inline-block; vertical-align:middle; box-sizing:border-box; position:relative; width:100%; padding-left:20px;} #contents.c_sub .cs_view.t3 .csv_content .csvc_cont blockquote:before {content:''; display:inline-block; vertical-align:middle; position:absolute; left:0; top:0; bottom:0; width:5px; background-color:#EBEAEE;} #contents.c_sub .cs_view.t3 .csv_content .csvc_cont pre {display:inline-block; vertical-align:middle; box-sizing:border-box; width:100%; padding:3px; border-radius:5px; background-color:#EBEAEE; white-space:pre-wrap;} #contents.c_sub .cs_view.t3 .csv_content .csvc_cont h1 {font-size:40px; font-weight:600; line-height:50px;} #contents.c_sub .cs_view.t3 .csv_content .csvc_cont h2 {font-size:36px; font-weight:600; line-height:46px;} #contents.c_sub .cs_view.t3 .csv_content .csvc_cont h3 {font-size:32px; font-weight:600; line-height:42px;} #contents.c_sub .cs_view.t3 .csv_content .csvc_cont h4 {font-size:28px; font-weight:600; line-height:38px;} #contents.c_sub .cs_view.t3 .csv_content .csvc_cont h5 {font-size:24px; font-weight:600; line-height:34px;} #contents.c_sub .cs_view.t3 .csv_content .csvc_cont h6 {font-size:20px; font-weight:600; line-height:30px;} #contents.c_sub .cs_view.t3 .csv_artist {display:inline-block; vertical-align:middle; box-sizing:border-box; width:100%; margin-bottom:40px; padding:20px; border-radius:10px; background-color:#F4F3F7;} #contents.c_sub .cs_view.t3 .csv_artist strong {display:inline-block; vertical-align:middle; width:100%; font-family:"Pretendard"; font-size:16px; font-weight:700; line-height:30px; letter-spacing:-0.64px; text-align:left;} #contents.c_sub .cs_view.t3 .csv_artist strong i {display:inline-block; vertical-align:middle; width:26px; margin:2px; margin-right:12px; background-image:url("/images/justus/icon_artists.svg"); background-repeat:no-repeat; background-size:100% auto; background-position:center; aspect-ratio:1/1;} #contents.c_sub .cs_view.t3 .csv_artist ul {display:flex; vertical-align:middle; margin-top:20px; flex-direction:row; flex-wrap:wrap; gap:10px;} #contents.c_sub .cs_view.t3 .csv_artist li {display:inline-block; vertical-align:middle; padding:0 12px; border-radius:50px; background-color:#fff; font-family:"Pretendard"; font-size:14px; font-weight:500; line-height:25px; letter-spacing:-0.56px; cursor:pointer;} #contents.c_sub .cs_view.t3 .csv_artist li:hover {background-color:#3843D0; color:#fff;} #contents.c_sub .cs_view.t3 .csv_nb {display:inline-block; vertical-align:middle; width:100%; border-bottom:1px solid #d3d2d2;} #contents.c_sub .cs_view.t3 .csv_nb li {display:inline-block; vertical-align:middle; width:100%; padding:5px 0; border-top:1px solid #d3d2d2; text-align:left;} #contents.c_sub .cs_view.t3 .csv_nb .csvn_title {display:inline-block; vertical-align:middle; width:95px; margin-right:20px; font-family:"Pretendard"; font-size:16px; font-weight:600; line-height:52px; letter-spacing:-0.64px;} #contents.c_sub .cs_view.t3 .csv_nb .csvn_title i {display:inline-block; vertical-align:middle; float:left; width:52px; aspect-ratio:1/1; background-image:url("/images/common/icon_board_arrow.svg"); background-repeat:no-repeat; background-size:52px auto; background-position:center;} #contents.c_sub .cs_view.t3 .csv_nb .btn_next .csvn_title i {transform:rotate(180deg);} #contents.c_sub .cs_view.t3 .csv_nb li a {display:inline-block; vertical-align:middle; overflow:hidden; width:auto; max-width:calc(100% - 230px); font-family:"Pretendard"; font-size:16px; font-weight:500; line-height:52px; color:#231F20 !important; letter-spacing:-0.64px; opacity:0.5; text-overflow:ellipsis; white-space:nowrap;} #contents.c_sub .cs_view.t3 .csv_nb li a:hover {text-decoration:underline; text-underline-position:under;} #contents.c_sub .cs_view.t3 .csv_nb .csvn_date {display:inline-block; vertical-align:middle; box-sizing:border-box; float:right; width:115px; padding:0 20px; font-size:14px; font-weight:600; line-height:52px; letter-spacing:-0.56px; opacity:0.5;} #contents.c_sub .cs_view.t3 .csv_buttons {margin-top:60px;} /* 목록 type4 */ #contents.c_sub .cs_list.t4 {display:inline-block; vertical-align:middle; width:100%;} #contents.c_sub .cs_list.t4 .csl_wrap {display:inline-block; vertical-align:middle; box-sizing:border-box; width:100%; max-width:1400px; padding:60px; background-color:#fff; box-shadow:0px 30px 60px 0px rgba(18, 18, 20, 0.06);} #contents.c_sub .cs_list.t4 .cs_top {display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;} #contents.c_sub .cs_list.t4 .cs_top .total_count {font-size:16px; font-family:"Pretendard"; font-weight:600; color:#231F20; line-height:30px; text-align:left;} #contents.c_sub .cs_list.t4 .cs_top .total_count span {color:#3843D0;} #contents.c_sub .cs_list.t4 .csl_head {display:flex; gap:10px; width:100%; padding:20px 0; border-top:#3843D0 solid 2px; border-bottom:#231F2020 solid 1px;} #contents.c_sub .cs_list.t4 .csl_head p {display:inline-block; vertical-align:middle; font-size:16px; font-family:"Pretendard"; font-weight:600; color:#908e8f; line-height:30px; text-align:center;} #contents.c_sub .cs_list.t4 .csl_head .cslh_no {width:70px;} #contents.c_sub .cs_list.t4 .csl_head .cslh_title {width:calc(100% - 200px);} #contents.c_sub .cs_list.t4 .csl_head .cslh_date {width:110px;} #contents.c_sub .cs_list.t4 .csl_cont {display:flex; flex-wrap:wrap;} #contents.c_sub .cs_list.t4 .csl_cont > li {display:inline-block; vertical-align:middle; box-sizing:border-box; width:100%; padding:20px 0; border-bottom:#231F2020 solid 1px; background-color:#fff;} #contents.c_sub .cs_list.t4 .csl_cont > li:hover, #contents.c_sub .cs_list.t4 .csl_cont > li.inv_notice {background-color:#F4F3F7;} #contents.c_sub .cs_list.t4 .csl_cont > li .csl_box {display:flex; vertical-align:middle; width:100%; flex-wrap:nowrap; justify-content:space-between; gap:10px;} #contents.c_sub .cs_list.t4 .csl_cont > li .csl_no {display:inline-block; vertical-align:middle; width:70px; font-size:16px; font-weight:600; line-height:30px; letter-spacing:-0.64px; color:#908e8f; text-align:center;} #contents.c_sub .cs_list.t4 .csl_cont > li .csl_no .notice_icon {display:inline-block; vertical-align:middle; width:70px; height:30px; background-image:url("/images/common/icon_notice.svg"); background-repeat:no-repeat; background-size:24px; background-position:center;} #contents.c_sub .cs_list.t4 .csl_cont > li .csl_title {display:-webkit-box; display:-ms-flexbox; display:box; vertical-align:top; overflow:hidden; width:calc(100% - 200px); height:30px; font-family:"Pretendard"; font-size:18px; font-weight:600; line-height:30px; letter-spacing:-0.8px; text-align:left; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:1;} #contents.c_sub .cs_list.t4 .csl_cont > li .csl_title a {color:#231F20;} #contents.c_sub .cs_list.t4 .csl_cont > li .csl_title a:hover {color:#3843D0; text-decoration:underline;} #contents.c_sub .cs_list.t4 .csl_cont > li .csl_info {display:inline-block; vertical-align:middle; width:110px; font-size:16px; font-weight:600; line-height:30px; letter-spacing:-0.64px; color:#908e8f; text-align:center;} #contents.c_sub .cs_list.t4 .csl_cont > li .csl_info span {display:inline-block; vertical-align:middle; float:left; width:100%;} /* 푸터 */ #footer {display:inline-block; vertical-align:middle; float:left; width:100%; padding:60px 0; background-color:#3843D0;} #footer .f_wrap {display:inline-block; vertical-align:middle; position:relative; box-sizing:border-box; width:100%; padding-left:clamp(200px, 35.4167vw, 680px);} #footer .f_logo {position:absolute; left:0; top:0; font-size:0; line-height:0; word-break:keep-all;} #footer .f_logo strong {display:none;} #footer .f_copyright {position:absolute; left:0; bottom:0; font-size:0; line-height:0; word-break:keep-all;} #footer .f_copyright span {display:inline-block; vertical-align:middle; margin-right:30px; font-size:18px; font-weight:600; color:#F4F3F7; line-height:30px; letter-spacing:0.2px; word-break:keep-all;} #footer .f_copyright a {display:inline-block; vertical-align:middle; position:relative; font-size:10px; font-weight:600; color:#F4F3F7; line-height:30px; opacity:0.3; word-break:keep-all;} #footer .f_copyright a:before {content:""; position:absolute; left:0; bottom:5px; width:1%; height:1px; opacity:0; background-color:#F4F3F7; border-radius:1px; transition:0.3s;} #footer .f_copyright a:hover:before {width:100%; opacity:1;} #footer .f_sns {display:inline-block; vertical-align:middle; float:left; width:100%; margin-top:5px;} #footer .f_sns ul li {width:40px;} #footer .f_sns ul li a:before {background-color:#F4F3F7;} #footer .f_sns ul li a i {background-image:url("/images/common/icon_sns.svg");} #footer .f_info {display:inline-block; vertical-align:middle; float:left; width:100%; margin-top:15px;} #footer .f_info .fi_list {display:inline-block; vertical-align:middle; float:left; width:100%;} #footer .f_info .fi_list li {display:inline-block; vertical-align:middle; float:left; margin-right:40px; font-size:18px; font-weight:600; color:#F4F3F7; line-height:30px; letter-spacing:-0.7px; word-break:keep-all;} #footer .f_info .fi_list li:last-child {margin-right:0;} #footer .f_info .fi_list li a {position:relative; color:#F4F3F7;} #footer .f_info .fi_list li a:before {content:""; position:absolute; left:0; bottom:-5px; width:1%; height:2px; opacity:0; background-color:#F4F3F7; border-radius:1px; transition:0.3s;} #footer .f_info .fi_list li a:hover:before {width:100%; opacity:0.15;} #footer .f_info .fi_buttons {display:inline-block; vertical-align:middle; float:left; margin-top:40px;} #footer .f_info .fi_buttons li {display:inline-block; vertical-align:middle; float:left; margin-right:10px;} #footer .f_info .fi_buttons li:last-child {margin-right:0;} #footer .f_info .fi_buttons li .fib_btn {display:inline-block; vertical-align:middle; position:relative; padding-left:15px; padding-right:32px; background-color:#F4F3F7; border-radius:15px; font-size:14px; font-weight:600; color:#3843D0; line-height:30px; letter-spacing:-0.5px; word-break:keep-all;} #footer .f_info .fi_buttons li .fib_btn i {position:absolute; right:10px; top:7px; width:16px; height:auto; background-image:url("/images/common/icon_link.svg"); background-size:100% auto; background-repeat:no-repeat; background-position:center; aspect-ratio:1/1; transition:0.3s;} #footer .f_info .fi_buttons li .fib_btn:hover i {transform:scale(1.15);} @media all and (max-width:1730px) { /* 목록 type3 */ #contents.c_sub .cs_list.t3 > ul > li .csl_top .cslt_title {-webkit-line-clamp:4;} } @media all and (max-width:1660px) { /* company - about us */ #contents.c_sub .cs_about .csc_are .csc_box:before {left:26.5060vw;} #contents.c_sub .cs_about .csc_are .csc_box:after {top:4.8193vw; bottom:4.8193vw; left:32.8313vw;} #contents.c_sub .cs_about .csc_are .csca_left {width:26.5060vw; gap:2.4096vw;} #contents.c_sub .cs_about .csc_are .csca_left img {width:12.5vw;} #contents.c_sub .cs_about .csc_are .csca_left .cscal_icon {width:26.5060vw;} @keyframes wave { 1% {left:50%; right:50%; top:50%; bottom:50%; opacity:0;} 10% {left:2.4096vw; right:2.4096vw; top:2.4096vw; bottom:2.4096vw; opacity:0;} 45% {left:1.2048vw; right:1.2048vw; top:1.2048vw; bottom:1.2048vw; opacity:0.6;} 99% {left:0; right:0; top:0; bottom:0; opacity:0;} 100% {left:0; right:0; top:0; bottom:0; opacity:0;} } #contents.c_sub .cs_about .csc_are .csca_right {gap:1.2048vw;} #contents.c_sub .cs_about .csc_are .csca_right .cscar_box {padding:3.0120vw;} #contents.c_sub .cs_about .csc_are .csca_right .cscar_box strong {width:7.7108vw; margin-right:3.0120vw; font-size:3.0120vw; line-height:3.6145vw; letter-spacing:-0.0602vw;} #contents.c_sub .cs_about .csc_are .csca_right .cscar_box p {font-size:1.0843vw; line-height:1.8072vw; letter-spacing:-0.0602vw;} /* 목록 type3 */ #contents.c_sub .cs_list.t3 > ul > li .csl_top .cslt_title {-webkit-line-clamp:3;} #contents.c_sub .cs_list.t3 > ul > li .csl_winning {height:55px;} } @media all and (max-width:1440px) { /* company - about us */ #contents.c_sub .cs_about .csc_section {margin-bottom:160px;} #contents.c_sub .cs_about .csc_do .cscd_content {padding:70px 20px;} #contents.c_sub .cs_about .csc_do .cscd_content p span {display:inline;} #contents.c_sub .cs_about .csc_do .cscd_content p span b {display:inline-block;} #contents.c_sub .cs_about .csc_do .cscd_content p span b:before {bottom:7px;} #contents.c_sub .cs_about .csc_history {margin-bottom:0;} /* 목록 type1 */ #contents.c_sub .cs_list.t1 li {width:33.333%;} #contents.c_sub .cs_list.t1 li .csl_info span {font-size:clamp(12px, 0.9722vw, 14px);} #contents.c_sub .cs_list.t1 li .csl_info strong {font-size:clamp(20px, 1.7361vw, 25px); line-height:clamp(35px, 2.7778vw, 40px);} /* 목록 type2 */ #contents.c_sub .cs_list.t2 > ul > li {width:calc(25% - 40px);} #contents.c_sub .cs_list.row > ul > li {width:100%;} /* 목록 type3 */ #contents.c_sub .cs_list.t3 > ul > li {width:calc(25% - 30px);} #contents.c_sub .cs_list.t3 > ul > li .csl_top .cslt_title {-webkit-line-clamp:4;} /* 상세 type3 */ #contents.c_sub .cs_view.t3 .csv_top .title {font-size:clamp(20px, 1.7361vw, 25px); line-height:clamp(30px, 2.7778vw, 40px);} #contents.c_sub .cs_view.t3 .csv_top .info .no, #contents.c_sub .cs_view.t3 .csv_top .info .date {font-size:clamp(12px, 0.9722vw, 14px); line-height:20px;} } @media all and (max-width:1280px) { /* 헤더 */ #header .h_list > li {padding:0 30px;} #header .h_list > li > a {font-size:17px;} #header .h_sitemap .hs_mainmenu {width:540px; margin-left:-270px; margin-top:-275px;} #header .h_sitemap .hs_mainmenu .hs_list > li {margin-bottom:20px;} #header .h_sitemap .hs_mainmenu .hs_list > li > a {font-size:30px;} #header .h_sitemap .hs_mainmenu .hs_list > li > ul {width:calc(100% - 360px);} #header .h_sitemap .hs_mainmenu .hs_list > li > ul > li > a {font-size:17px;} #header .h_sitemap .hs_mainmenu .hs_sns {margin-top:30px;} #header .h_sitemap .hs_sns ul li {width:40px;} /* sub */ #contents.c_sub .cs_top #cs_youtubePopup .csy_box {width:70%;} #contents.c_sub .no_contents i {width:50px;} #contents.c_sub .no_contents p {margin-top:15px; font-size:20px; line-height:30px;} /* company - about us */ #contents.c_sub .cs_about {margin:20px auto;} #contents.c_sub .cs_about .csc_section {margin-bottom:140px;} #contents.c_sub .cs_about .csc_section .csc_box {margin-top:40px;} #contents.c_sub .cs_about .csc_are .csc_box:before {left:31.2500vw;} #contents.c_sub .cs_about .csc_are .csc_box:after {top:5.3906vw; bottom:5.3906vw; left:34.7656vw;} #contents.c_sub .cs_about .csc_are .csca_left {width:31.2500vw; gap:2.3438vw;} #contents.c_sub .cs_about .csc_are .csca_left .cscal_icon {width:31.2500vw;} @keyframes wave { 1% {left:50%; right:50%; top:50%; bottom:50%; opacity:0;} 10% {left:2.3438vw; right:2.3438vw; top:2.3438vw; bottom:2.3438vw; opacity:0;} 45% {left:1.1719vw; right:1.1719vw; top:1.1719vw; bottom:1.1719vw; opacity:0.6;} 99% {left:0; right:0; top:0; bottom:0; opacity:0;} 100% {left:0; right:0; top:0; bottom:0; opacity:0;} } #contents.c_sub .cs_about .csc_are .csca_right {width:55%; gap:1.1719vw;} #contents.c_sub .cs_about .csc_are .csca_right .cscar_box {padding:3.1250vw;} #contents.c_sub .cs_about .csc_are .csca_right .cscar_box strong {width:8.5938vw; margin-right:2.3438vw; font-size:3.5156vw; line-height:3.5156vw; letter-spacing:-0.0781vw;} #contents.c_sub .cs_about .csc_are .csca_right .cscar_box p {font-size:1.4063vw; line-height:2.3438vw; letter-spacing:-0.0781vw;} #contents.c_sub .cs_about .csc_do .csc_box {gap:25px;} #contents.c_sub .cs_about .csc_do .cscd_content {width:calc(25% - 18.75px); padding:40px 20px;} #contents.c_sub .cs_about .csc_history {margin-bottom:0;} /* 목록 type1 */ #contents.c_sub .cs_list.t1 {margin-top:-40px; margin-bottom:-40px;} /* 상세 type1 */ #contents.c_sub .cs_view.t1 .csv_info > div {width:calc(50% - 40px);} /* 목록 type2 */ #contents.c_sub .cs_list.t2 > ul {margin-left:-30px;} #contents.c_sub .cs_list.t2 > ul > li {width:calc(25% - 30px); margin-bottom:30px; margin-left:30px;} #contents.c_sub .cs_list.row > ul {margin:0 auto;} #contents.c_sub .cs_list.row > ul > li {width:100%; margin-left:0;} /* 상세 type2 */ #contents.c_sub .cs_view.t2 .csv_info > div {width:calc(50% - 40px);} #contents.c_sub .cs_view.t2 #cs_youtubePopup .csy_box {width:70%;} /* 목록 type3 */ #contents.c_sub .cs_list.t3 > ul {gap:30px;} #contents.c_sub .cs_list.t3 > ul > li {width:calc(25% - 22.5px); padding:25px;} #contents.c_sub .cs_list.t3 > ul > li .csl_top .cslt_title {font-size:18px; line-height:26px; -webkit-line-clamp:3;} #contents.c_sub .cs_list.t3 > ul > li .csl_top .cslt_name.ko {font-size:20px; line-height:30px;} #contents.c_sub .cs_list.t3 > ul > li .csl_top .cslt_name.en {font-size:16px; line-height:26px;} #contents.c_sub .cs_list.t3 > ul > li .csl_winning {height:45px;} #contents.c_sub .cs_list.t3 > ul > li .csl_winning li {padding-left:8px;} #contents.c_sub .cs_list.t3 > ul > li .csl_winning li:before {top:8px;} #contents.c_sub .cs_list.t3 > ul > li .csl_winning li strong {width:30px; font-size:12px; line-height:20px;} #contents.c_sub .cs_list.t3 > ul > li .csl_winning li span {width:calc(100% - 40px); height:20px; font-size:12px; line-height:20px;} /* 푸터 */ #footer .f_sns ul {width:auto; float:right;} #footer .f_info .fi_list li {width:100%; text-align:right} #footer .f_info .fi_buttons {float:right;} #footer .f_copyright {bottom:-5px;} } @media all and (max-width:1024px) { /* 헤더 */ #header .h_wrap {padding:30px 0; padding-bottom:50px;} #header .h_list > li {padding:0 25px;} #header .h_list > li > a {font-size:15px;} /* 컨텐츠 */ #contents.c_sub {margin-top:160px; margin-bottom:60px;} /* sub */ #contents.c_sub .cs_title, #contents.c_sub .cs_top {margin-bottom:50px;} #contents.c_sub .cs_top #cs_filter_popup {width:370px;} #contents.c_sub .cs_top #cs_filter_popup .csfp_content {height:calc(100% - 115px);} #contents.c_sub .cs_top #cs_youtubePopup .csy_box {width:80%;} /* company - about us */ #contents.c_sub .cs_nav_btn button {height:50px; font-size:20px; line-height:46px;} #contents.c_sub .cs_about .csc_section {margin-bottom:120px;} #contents.c_sub .cs_about .csc_are .csc_box:before {left:27.3438vw;} #contents.c_sub .cs_about .csc_are .csc_box:after {top:5.6641vw; bottom:5.6641vw; left:29.2969vw;} #contents.c_sub .cs_about .csc_are .csca_left {width:27.3438vw; gap:2.3438vw;} #contents.c_sub .cs_about .csc_are .csca_left p {font-size:18px; line-height:30px;} #contents.c_sub .cs_about .csc_are .csca_left .cscal_icon {width:27.3438vw;} #contents.c_sub .cs_about .csc_are .csca_left .cscal_icon:before {top:30px; bottom:30px; left:30px; right:30px;} @keyframes wave { 1% {left:50%; right:50%; top:50%; bottom:50%; opacity:0;} 10% {left:2.3438vw; right:2.3438vw; top:2.3438vw; bottom:2.3438vw; opacity:0;} 45% {left:1.1719vw; right:1.1719vw; top:1.1719vw; bottom:1.1719vw; opacity:0.6;} 99% {left:0; right:0; top:0; bottom:0; opacity:0;} 100% {left:0; right:0; top:0; bottom:0; opacity:0;} } #contents.c_sub .cs_about .csc_are .csca_right {width:65%; gap:1.1719vw;} #contents.c_sub .cs_about .csc_are .csca_right .cscar_box {padding:3.1250vw;;} #contents.c_sub .cs_about .csc_are .csca_right .cscar_box strong {width:9.7656vw; margin-right:2.3438vw; font-size:3.9063vw; line-height:5.8594vw; letter-spacing:-0.0977vw;} #contents.c_sub .cs_about .csc_are .csca_right .cscar_box p {font-size:1.7578vw; line-height:2.9297vw; letter-spacing:-0.0977vw;} #contents.c_sub .cs_about .csc_do .csc_box {flex-wrap:wrap;} #contents.c_sub .cs_about .csc_do .csc_box {gap:20px;} #contents.c_sub .cs_about .csc_do .cscd_content {width:calc(50% - 10px);} #contents.c_sub .cs_about .csc_do .cscd_content p span {display:block;} #contents.c_sub .cs_about .csc_history {margin-bottom:0;} #contents.c_sub .cs_about .csc_history .yearly {gap:80px;} #contents.c_sub .cs_about .csc_history .yearly .event {width:calc(100% - 200px);} /* 목록 type1 */ #contents.c_sub .cs_list.t1 {margin-top:-30px; margin-bottom:-30px;} #contents.c_sub .cs_list.t1 li .csl_info {margin-top:20px;} /* 상세 type1 */ #contents.c_sub .cs_view.t1 .csv_info > div {width:calc(50% - 30px)} #contents.c_sub .cs_view.t1 .csv_info .csvi_pic {top:160px;} #contents.c_sub .cs_view.t1 .csv_info .csvi_name {margin-bottom:7px; font-size:17px; line-height:28px;} #contents.c_sub .cs_view.t1 .csv_info .csvi_name.ko {margin:7px 0; font-size:60px; line-height:75px; letter-spacing:2px} #contents.c_sub .cs_view.t1 .csv_info .csvi_content {padding:20px 0;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content.t1 {margin-top:20px;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content > strong {font-size:25px; line-height:34px;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content > strong i {width:34px; margin-top:-17px;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content > strong i:before {width:18px; margin-left:-9px; margin-top:-9px;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content > ul {margin-top:15px;} #contents.c_sub .cs_view.t1 .csv_info, #contents.c_sub .cs_view.t1 .csv_buttons {margin-bottom:40px;} #contents.c_sub .cs_view.t1 .csv_pic .grid {margin-left:-30px;} #contents.c_sub .cs_view.t1 .csv_pic .grid-item {width:calc(33.333% - 30px); margin-left:30px; margin-bottom:30px;} /* 목록 type2 */ #contents.c_sub .cs_list.t2 > ul > li {width:calc(33.3333% - 30px);} #contents.c_sub .cs_list.t2 > ul > li .csl_info .title {line-height:25px;} #contents.c_sub .cs_list.t2 > ul > li .csl_info .title.t1 {font-size:21px;} #contents.c_sub .cs_list.t2 > ul > li .csl_info .title.t2 {font-size:18px;} #contents.c_sub .cs_list.t2 > ul > li .csl_info .date {margin-top:10px; font-size:14px; line-height:25px;} #contents.c_sub .cs_list.row > ul > li {width:100%;} /* 상세 type2 */ #contents.c_sub .cs_view.t2 .csv_info > div {width:calc(50% - 30px)} #contents.c_sub .cs_view.t2 .csv_info .csvi_pic {top:160px;} #contents.c_sub .cs_view.t2 .csv_info .csvi_name {margin-bottom:7px; font-size:17px; line-height:28px;} #contents.c_sub .cs_view.t2 .csv_info .csvi_name.ko {margin:7px 0; font-size:60px; line-height:75px; letter-spacing:2px} #contents.c_sub .cs_view.t2 .csv_info .csvi_title {margin:7px 0; font-size:45px; line-height:55px; letter-spacing:2px} #contents.c_sub .cs_view.t2 .csv_info .csvi_content {padding:20px 0;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content.t1, #contents.c_sub .cs_view.t2 .csv_info .csvi_content.t2 {margin-top:20px;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content > strong {font-size:25px; line-height:34px;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content > strong i {width:34px; margin-top:-17px;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content > strong i:before {width:18px; margin-left:-9px; margin-top:-9px;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content > ul {margin-top:15px;} #contents.c_sub .cs_view.t2 .csv_info {margin-bottom:40px;} #contents.c_sub .cs_view.t2 #cs_youtubePopup .csy_box {width:80%;} /* 목록 type3 */ #contents.c_sub .cs_list.t3 > ul > li {width:calc(33.3333% - 20px);} /* aside */ #aside {right:40px; bottom:40px;} #aside .a_scrolltop {width:50px; height:50px;} #aside .a_scrolltop i {width:18px; margin-left:-9px; margin-top:-9px;} /* 푸터 */ #footer {padding:40px 0;} } @media all and (max-width:768px) { /* 헤더 */ #header .h_wrap {padding:20px 0;} #header .h_logo {position:relative; float:left; height:30px; margin:5px 0;} #header .h_list {display:none;} #header .h_list > li .hl_submenu {display:none !important;} #header .h_sitemap {background-color:#F4F3F7; backdrop-filter:none;} #header .h_sitemap .hs_mainmenu {left:20px; right:20px; top:100px; bottom:20px; width:auto; height:auto; overflow:auto; margin-left:0; margin-top:0;} #header .h_sitemap .hs_mainmenu .hs_list > li > a {display:none;} #header .h_sitemap .hs_mainmenu .hs_list > li:last-child > a {display:inline-block; vertical-align:middle;} #header .h_sitemap .hs_mainmenu .hs_list > li > strong {display:inline-block; vertical-align:middle; position:relative; float:left; padding-right:24px; font-size:30px; font-weight:700; color:#3843D0; text-align:left; line-height:40px;} #header .h_sitemap .hs_mainmenu .hs_list > li > strong i {position:absolute; right:0; top:50%; width:16px; height:16px; margin-top:-8px; color:#3843D0;} #header .h_sitemap .hs_mainmenu .hs_list > li > strong i:before {content:""; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; background-color:currentColor;} #header .h_sitemap .hs_mainmenu .hs_list > li > strong i:after {content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; margin-left:-1px; background-color:currentColor;} #header .h_sitemap .hs_mainmenu .hs_list > li.on > strong i:after {display:none;} #header .h_sitemap .hs_mainmenu .hs_list > li.on > ul {display:inline-block; vertical-align:middle;} #header .h_sitemap .hs_mainmenu .hs_list > li > ul {display:none; box-sizing:border-box; width:100%; padding-left:10px;} /* aside */ #aside {right:25px; bottom:25px;} #aside .a_scrolltop {width:40px; height:40px;} #aside .a_scrolltop i {width:16px; margin-left:-8px; margin-top:-8px;} /* sub */ #contents.c_sub {margin-top:100px; margin-bottom:40px;} #contents.c_sub .cs_title, #contents.c_sub .cs_top {margin-bottom:40px;} #contents.c_sub .cs_top #cs_youtubePopup .csy_box {width:100%; padding:0 25px;} #contents.c_sub .cs_top #cs_youtubePopup .csy_box i {width:40px; height:40px; margin-top:40px;} #contents.c_sub .cs_top .csf_popup_open_btn {padding:10px 20px;} #contents.c_sub .sort_wrap.t2 {gap:5px;} #contents.c_sub .sort_wrap.t2 .cs_sort {width:168px;} #contents.c_sub .no_contents {padding:80px 0;} #contents.c_sub .no_contents i {width:40px;} #contents.c_sub .no_contents p {margin-top:10px; font-size:18px; line-height:28px;} /* company - about us */ #contents.c_sub .cs_nav_btn {margin-bottom:40px;} #contents.c_sub .cs_nav_btn button {font-size:18px;} #contents.c_sub .cs_about {margin:0 auto;} #contents.c_sub .cs_about .csc_section {margin-bottom:100px;} #contents.c_sub .cs_about .csc_are .csc_box {flex-direction:column;} #contents.c_sub .cs_about .csc_are .csc_box:before {top:260px; bottom:0; left:50%; width:2px; height:auto; margin-top:0; margin-left:-1px;} #contents.c_sub .cs_about .csc_are .csc_box:after {top:275px; bottom:44px; left:225px; left:16.6666%; right:16.6666%; border-right:2px solid #231F20; border-bottom:0;} #contents.c_sub .cs_about .csc_are .csca_left {width:260px; justify-content:center; gap:10px; aspect-ratio:1/1;} #contents.c_sub .cs_about .csc_are .csca_left img {width:85px;} #contents.c_sub .cs_about .csc_are .csca_left .cscal_icon {width:260px;} #contents.c_sub .cs_about .csc_are .csca_left .cscal_icon:before {top:20px; bottom:20px; left:20px; right:20px;} @keyframes wave { 1% {left:50%; right:50%; top:50%; bottom:50%; opacity:0;} 10% {left:18px; right:18px; top:18px; bottom:18px; opacity:0;} 45% {left:9px; right:9px; top:9px; bottom:9px; opacity:0.6;} 99% {left:0; right:0; top:0; bottom:0; opacity:0;} 100% {left:0; right:0; top:0; bottom:0; opacity:0;} } #contents.c_sub .cs_about .csc_are .csca_right {width:100%; margin-top:40px; flex-direction:row; gap:20px;} #contents.c_sub .cs_about .csc_are .csca_right .cscar_box {width:calc(33.3333% - 13.3333px); padding:20px 15px; flex-direction:column;} #contents.c_sub .cs_about .csc_are .csca_right .cscar_box strong {width:auto; margin-right:0; font-size:38px; line-height:56px; letter-spacing:-1px;} #contents.c_sub .cs_about .csc_are .csca_right .cscar_box p {font-size:14px; line-height:28px; letter-spacing:-0.5px; text-align:center;} #contents.c_sub .cs_about .csc_are .csca_right .cscar_box p span {display:inline;} #contents.c_sub .cs_about .csc_are .csca_right .cscar_box p span b {display:inline-block;} #contents.c_sub .cs_about .csc_are .csc_sign .cscs_box {margin-top:20px; gap:10px;} #contents.c_sub .cs_about .csc_are .csc_sign p {font-size:14px;} #contents.c_sub .cs_about .csc_are .csc_sign img {width:80px;} #contents.c_sub .cs_about .csc_do .cscd_content {width:100%; padding:30px 20px;} #contents.c_sub .cs_about .csc_history {margin-bottom:0;} #contents.c_sub .cs_about .csc_history .yearly {padding-bottom:30px; gap:60px;} #contents.c_sub .cs_about .csc_history .yearly + .yearly {margin-top:25px;} #contents.c_sub .cs_about .csc_history .yearly:before {top:55px; left:50px;} #contents.c_sub .cs_about .csc_history .yearly strong {width:100px; font-size:39px; line-height:30px; letter-spacing:-2px;} #contents.c_sub .cs_about .csc_history .yearly .event {width:calc(100% - 160px);} #contents.c_sub .cs_about .csc_history .yearly .event p + p {margin-top:4px;} #contents.c_sub .cs_about .csc_history .yearly .event .month {width:55px; padding-left:15px; font-size:16px; line-height:30px;} #contents.c_sub .cs_about .csc_history .yearly .event .month:before {top:12px; left:0; width:6px; height:6px; border-radius:5px;} #contents.c_sub .cs_about .csc_history .yearly .event .text {width:calc(100% - 55px); margin-left:4px; padding:2px 0; font-size:16px; line-height:24px; letter-spacing:-1px; opacity:0.5;} /* company - contact us */ #contents.c_sub .cs_contact {padding:60px;} #contents.c_sub .cs_contact .privacy_popup .privacy_popup_wrap {width:calc(100% - 50px);} #contents.c_sub .cs_contact .csc_section {max-width:100%;} #contents.c_sub .cs_contact .csc_section .csc_form_btn {margin-top:40px;} /* 페이징 */ #contents.c_sub .cs_list .csl_pg {margin-top:40px;} /* 목록 type1 */ #contents.c_sub .cs_list.t1 {margin-top:-25px; margin-bottom:-25px;} #contents.c_sub .cs_list.t1 li {width:50%;} #contents.c_sub .cs_list.t1 li .csl_info span {font-size:clamp(12px, 1.8229vw, 14px);} #contents.c_sub .cs_list.t1 li .csl_info strong {font-size:clamp(20px, 3.2552vw, 25px); line-height:clamp(35px, 5.2083vw, 40px);} /* 상세 type1 */ #contents.c_sub .cs_view.t1 .csv_info .csvi_pic {top:100px;} #contents.c_sub .cs_view.t1 .csv_info > div {width:calc(50% - 15px);} #contents.c_sub .cs_view.t1 .csv_pic .grid {margin-left:-25px;} #contents.c_sub .cs_view.t1 .csv_pic .grid-item {width:calc(50% - 25px); margin-left:25px; margin-bottom:25px;} #contents.c_sub .cs_view.t1 .csv_popup .csv_popup_wrap {display:flex; max-width:80%; max-height:80%;} #contents.c_sub .cs_view.t1 .csv_popup img {max-width:100%; max-height:calc(100% - 80px);} #contents.c_sub .cs_view.t1 .csvp_popup_content {max-width:80%; max-height:calc(80% - 80px);} #contents.c_sub .cs_view.t1 .csv_popup .csv_popup_wrap i, #contents.c_sub .cs_view.t1 .csvp_popup i {width:40px; height:40px; margin-top:40px;} /* 목록 type2 */ #contents.c_sub .cs_list.t2 > ul {margin-left:-25px;} #contents.c_sub .cs_list.t2 > ul > li {width:calc(50% - 25px); margin-bottom:25px; margin-left:25px;} #contents.c_sub .cs_list.t2 > ul > li .csl_info .title {line-height:24px;} #contents.c_sub .cs_list.t2 > ul > li .csl_info .title.t1 {font-size:18px;} #contents.c_sub .cs_list.t2 > ul > li .csl_info .title.t2 {font-size:16px;} #contents.c_sub .cs_list.t2 > ul > li .csl_artists .csla_popup {left:50%; right:auto; top:auto; bottom:60px; width:calc(100% - 25px); transform:translateX(-50%);} #contents.c_sub .cs_list.t2 > ul > li .csl_artists .csla_popup.t2 {left:50%; right:auto;} #contents.c_sub .cs_list.t2 > ul > li .csl_artists .csla_popup:before {top:auto; bottom:3px; left:auto; right:20px; margin-top:0; margin-left:0; transform:rotate(225deg) translate(-50%, -50%);} #contents.c_sub .cs_list.t2 > ul > li .csl_artists .csla_popup.t2:before {left:auto; right:27px; margin-left:0;} #contents.c_sub .cs_list.row > ul {margin:0 auto;} #contents.c_sub .cs_list.row > ul > li {width:100%; margin-left:0;} /* 상세 type2 */ #contents.c_sub .cs_view.t2 .csv_info .csvi_pic {top:100px;} #contents.c_sub .cs_view.t2 .csv_info > div {width:calc(50% - 15px);} #contents.c_sub .cs_view.t2 #cs_youtubePopup .csy_box {width:100%; padding:0 25px;} /* 목록 type3 */ #contents.c_sub .cs_list.t3 > ul {gap:25px;} #contents.c_sub .cs_list.t3 > ul > li {width:calc(50% - 12.5px);} #contents.c_sub .cs_list.t3 > ul > li .csl_top .cslt_title {-webkit-line-clamp:5;} /* 상세 type3 */ #contents.c_sub .cs_view.t3 .csv_top .title {font-size:clamp(20px, 3.2552vw, 25px); line-height:clamp(30px, 4.2083vw, 40px);} #contents.c_sub .cs_view.t3 .csv_top .info {margin-top:5px;} #contents.c_sub .cs_view.t3 .csv_top .info .no, #contents.c_sub .cs_view.t3 .csv_top .info .date {font-size:clamp(12px, 1.8229vw, 14px);} #contents.c_sub .cs_view.t3 .csv_top .info .no:before {top:4px;} #contents.c_sub .cs_view.t3 .csv_top .link {margin-top:5px; font-size:14px;} #contents.c_sub .cs_view.t3 .csv_content {margin-top:30px; padding:30px 0;} #contents.c_sub .cs_view.t3 .csv_content .csvc_cont {font-size:16px; line-height:26px;} #contents.c_sub .cs_view.t3 .csv_content .csvc_cont b {font-weight:800;} #contents.c_sub .cs_view.t3 .csv_content .csvc_cont blockquote {padding-left:15px;} #contents.c_sub .cs_view.t3 .csv_content .csvc_cont h1 {font-size:38px; line-height:48px;} #contents.c_sub .cs_view.t3 .csv_content .csvc_cont h2 {font-size:34px; line-height:44px;} #contents.c_sub .cs_view.t3 .csv_content .csvc_cont h3 {font-size:30px; line-height:40px;} #contents.c_sub .cs_view.t3 .csv_content .csvc_cont h4 {font-size:26px; line-height:36px;} #contents.c_sub .cs_view.t3 .csv_content .csvc_cont h5 {font-size:22px; line-height:32px;} #contents.c_sub .cs_view.t3 .csv_content .csvc_cont h6 {font-size:18px; line-height:28px;} #contents.c_sub .cs_view.t3 .csv_artist {margin-bottom:30px;} #contents.c_sub .cs_view.t3 .csv_nb .csvn_title {width:80px; margin-right:10px; font-size:14px; line-height:40px;} #contents.c_sub .cs_view.t3 .csv_nb .csvn_title i {width:40px;} #contents.c_sub .cs_view.t3 .csv_nb li a {max-width:calc(100% - 175px); font-size:14px; line-height:40px;} #contents.c_sub .cs_view.t3 .csv_nb .csvn_date {width:85px; padding:0 10px; font-size:12px; line-height:40px;} #contents.c_sub .cs_view.t3 .csv_buttons {margin-top:40px;} /* 목록 type4 */ #contents.c_sub .cs_list.t4 .cs_top {margin-bottom:15px;} #contents.c_sub .cs_list.t4 .csl_head {display:none;} #contents.c_sub .cs_list.t4 .csl_cont {border-top:#3843D0 solid 2px;} #contents.c_sub .cs_list.t4 .csl_cont > li {position:relative; padding:15px 10px;} #contents.c_sub .cs_list.t4 .csl_cont > li:hover {background-color:#fff;} #contents.c_sub .cs_list.t4 .csl_cont > li .csl_box {flex-direction:column;} #contents.c_sub .cs_list.t4 .csl_cont > li .csl_no {width:auto; line-height:25px; text-align:left;} #contents.c_sub .cs_list.t4 .csl_cont > li .csl_no .notice_icon {width:25px; height:25px; background-size:25px; background-position:left;} #contents.c_sub .cs_list.t4 .csl_cont > li .csl_title {width:100%; height:auto; max-height:50px; line-height:25px; -webkit-line-clamp:2;} #contents.c_sub .cs_list.t4 .csl_cont > li .csl_info {position:absolute; top:15px; right:10px; width:auto; line-height:25px; text-align:right;} /* 푸터 */ #footer {padding:30px 0;} #footer .f_wrap {padding-left:0;} #footer .f_logo {position:relative; float:left; left:auto; top:auto; width:153px;} #footer .f_logo img {width:100%;} #footer .f_sns {margin-top:25px;} #footer .f_sns ul {float:left;} #footer .f_sns ul li + li {margin-left:20px;} #footer .f_info {margin-top:25px;} #footer .f_info .fi_list li {font-size:14px; text-align:left; line-height:20px; margin-right:0;} #footer .f_info .fi_list li + li {margin-top:10px;} #footer .f_info .fi_buttons {float:left; margin:25px 0;} #footer .f_copyright {display:inline-block; vertical-align:middle; position:relative; left:auto; bottom:auto; width:100%; text-align:left;} #footer .f_copyright span {margin-right:20px; font-size:12px; line-height:30px;} } @media all and (max-width:600px) { /* 콘텐츠 */ /* sub */ #contents.c_sub .cs_title {font-size:32px;} #contents.c_sub .sort_wrap {margin-top:10px;} #contents.c_sub .sort_wrap.t1 {width:100%;} #contents.c_sub .sort_wrap.t1 .cs_sort {width:100%;} #contents.c_sub .sort_wrap.t2 {width:100%; flex-direction:row; flex-wrap:wrap; gap:5px;} #contents.c_sub .sort_wrap.t2 .cs_sort {display:none; width:calc(100% - 110px);} #contents.c_sub .sort_wrap.t3 {width:100%; flex-direction:row; flex-wrap:wrap; gap:5px;} #contents.c_sub .sort_wrap.t3 .cs_search {width:100%;} #contents.c_sub .sort_wrap.t3 .cs_sort {display:none; width:100%;} #contents.c_sub .sort_wrap.t4 {width:100%;} #contents.c_sub .sort_wrap.t4 .cs_search {width:100%;} #contents.c_sub .cs_top .cs_search {width:calc(100% - 110px);} #contents.c_sub .cs_top .cs_search .css_dropdown {font-size:13px;} #contents.c_sub .cs_top .cs_search .css_dropdown li {font-size:13px; line-height:26px;} #contents.c_sub .cs_top .cs_search .css_words {font-size:13px; width:calc(100% - 144px);} #contents.c_sub .cs_top .csf_popup_open_btn {width:105px; padding:10px 15px;} #contents.c_sub .cs_top > strong.text {display:block;} /* company - about us */ #contents.c_sub .cs_nav_btn {flex-direction:column;} #contents.c_sub .cs_nav_btn button {height:40px; line-height:36px;} #contents.c_sub .cs_nav_btn.t2 button {background-color:transparent !important; color:#3843D0 !important; border-color:#3843D0 !important;} #contents.c_sub .cs_about .csc_are .csc_box {align-items:normal;} #contents.c_sub .cs_about .csc_are .csc_box:before {display:none;} #contents.c_sub .cs_about .csc_are .csc_box:after {display:none;} #contents.c_sub .cs_about .csc_are .csca_left {width:100%; height:210px; text-align:center; aspect-ratio:auto;} #contents.c_sub .cs_about .csc_are .csca_left .cscal_icon {width:210px;} #contents.c_sub .cs_about .csc_are .csca_right {width:100%; margin-top:20px; flex-direction:column; align-items:flex-end;} #contents.c_sub .cs_about .csc_are .csca_right .cscar_box {position:relative; z-index:1; width:100%; padding:15px 25px; align-items:flex-start;} #contents.c_sub .cs_about .csc_are .csca_right .cscar_box p {text-align:left;} #contents.c_sub .cs_about .csc_history .yearly {width:100%; padding-bottom:20px; gap:50px;} #contents.c_sub .cs_about .csc_history .yearly + .yearly {margin-top:15px;} #contents.c_sub .cs_about .csc_history .yearly:before {top:40px; left:35px;} #contents.c_sub .cs_about .csc_history .yearly strong {width:70px; font-size:28px; line-height:30px; letter-spacing:-1px;} #contents.c_sub .cs_about .csc_history .yearly .event {width:calc(100% - 120px);} #contents.c_sub .cs_about .csc_history .yearly .event p + p {margin-top:3px;} #contents.c_sub .cs_about .csc_history .yearly .event .month {width:39px; padding-left:11px; font-size:14px; line-height:30px;} #contents.c_sub .cs_about .csc_history .yearly .event .month:before {top:13px; left:0; width:5px; height:5px; border-radius:4px;} #contents.c_sub .cs_about .csc_history .yearly .event .text {width:calc(100% - 39px); margin-left:3px; padding:3px 0; font-size:14px; line-height:24px; letter-spacing:-1px; opacity:0.5;} /* company - contact us */ #contents.c_sub .cs_contact {padding:50px 30px;} #contents.c_sub .cs_contact .privacy_popup .privacy_popup_wrap {padding:25px;} #contents.c_sub .cs_contact .privacy_popup strong {font-size:20px; line-height:30px; margin-bottom:30px;} #contents.c_sub .cs_contact .privacy_popup strong:before {bottom:-15px;} #contents.c_sub .cs_contact .privacy_popup p {font-size:14px; line-height:24px;} #contents.c_sub .cs_contact .privacy_popup p + p {margin-top:15px;} #contents.c_sub .cs_contact .privacy_popup p > span span {display:inline;} #contents.c_sub .cs_contact .privacy_popup .privacy_close_btn_wrap {margin-top:15px;} #contents.c_sub .cs_contact #csca_contactForm, #contents.c_sub .cs_contact #csco_contactForm {margin-top:20px;} #contents.c_sub .cs_contact .csc_section input {font-size:14px;} #contents.c_sub .cs_contact .csc_section input, #contents.c_sub .cs_contact .csc_section textarea, #contents.c_sub .cs_contact .csc_section .csc_form .cscf_wrap, #contents.c_sub .cs_contact .csc_section .csc_form .g-recaptcha, #contents.c_sub .cs_contact .csc_section .csc_form.radio ul {width:100%;} #contents.c_sub .cs_contact .csc_section p.tip {padding:3px 0; font-size:12px; line-height:18px;} #contents.c_sub .cs_contact .csc_section .csc_form {flex-direction:column; gap:0;} #contents.c_sub .cs_contact .csc_section .csc_form strong {margin-top:10px; margin-bottom:10px;} #contents.c_sub .cs_contact .csc_section .csc_form + .csc_form {margin-top:10px;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscaf_input_wrap {padding-top:20px;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscof_input_wrap {padding-top:20px;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .form_download_btn {font-size:14px;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscafi_box .cscafi_file {font-size:14px;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscofi_box .cscofi_file {font-size:14px;} #contents.c_sub .cs_contact .csc_section .csc_form.t3 strong {margin-top:10px;} #contents.c_sub .cs_contact .csc_section .csc_form.t4 .cscf_wrap {padding-top:0;} #contents.c_sub .cs_contact .csc_section .csc_form.t4 .cscf_wrap input, #contents.c_sub .cs_contact .csc_section .csc_form.t4 .cscf_wrap label {top:4px;} #contents.c_sub .cs_contact .csc_section .csc_form.radio ul {padding:0;} #contents.c_sub .cs_contact .csc_section .csc_form.radio li label {font-size:14px;} #contents.c_sub .cs_contact .csc_section .csc_form_btn {margin-top:30px;} /* 페이징 */ #contents.c_sub .cs_list .csl_pg {width:100%;} #contents.c_sub .cs_list .csl_pg .pg_wrap {width:100%; flex-direction:column;} #contents.c_sub .cs_list .csl_pg .pg_page {width:calc(20% - 8px); aspect-ratio:unset;} #contents.c_sub .cs_list .csl_pg .pg_page:hover {color:#231F20 !important; background-color:transparent;} #contents.c_sub .cs_list .csl_pg .pg_left, #contents.c_sub .cs_list .csl_pg .pg_right {display:flex; gap:10px;} #contents.c_sub .cs_list .csl_pg .pg_start, #contents.c_sub .cs_list .csl_pg .pg_prev, #contents.c_sub .cs_list .csl_pg .pg_end, #contents.c_sub .cs_list .csl_pg .pg_next {width:calc(50% - 5px); aspect-ratio:unset;} #contents.c_sub .cs_list .csl_pg .pg_center {justify-content:center;} #contents.c_sub .cs_list .csl_pg .pg_page i {height:40px; aspect-ratio:unset;} #contents.c_sub .cs_list .csl_pg .pg_start, #contents.c_sub .cs_list .csl_pg .pg_prev, #contents.c_sub .cs_list .csl_pg .pg_end, #contents.c_sub .cs_list .csl_pg .pg_next {color:#fff !important; background-color:#231F20;} #contents.c_sub .cs_list .csl_pg .pg_start i, #contents.c_sub .cs_list .csl_pg .pg_prev i, #contents.c_sub .cs_list .csl_pg .pg_end i, #contents.c_sub .cs_list .csl_pg .pg_next i {filter:invert(99%) sepia(99%) saturate(81%) hue-rotate(32deg) brightness(110%) contrast(101%);} /* 목록 type1 */ #contents.c_sub .cs_list.t1 li {padding:15px;} #contents.c_sub .cs_list.t1 li .csl_pic:hover .cslp_info {transform:scale(2); opacity:0;} /* 목록 type2 */ #contents.c_sub .cs_list.t2 > ul {margin-left:0;} #contents.c_sub .cs_list.t2 > ul > li {width:100%; margin-left:0;} #contents.c_sub .cs_list.row > ul {width:100%; margin:0 auto;} /* 상세 type1 */ #contents.c_sub .cs_view.t1 .csv_info .csvi_pic {position:relative; top:0;} #contents.c_sub .cs_view.t1 .csv_info > div {width:100%;} #contents.c_sub .cs_view.t1 .csv_info > div + div {margin-top:30px;} #contents.c_sub .cs_view.t1 .csv_info, #contents.c_sub .cs_view.t1 .csv_buttons {margin-bottom:30px;} /* 상세 type2 */ #contents.c_sub .cs_view.t2 .csv_info .csvi_pic {position:relative; top:0;} #contents.c_sub .cs_view.t2 .csv_info > div {width:100%;} #contents.c_sub .cs_view.t2 .csv_info > div + div {margin-top:30px;} #contents.c_sub .cs_view.t2 .csv_info {margin-bottom:30px;} /* 목록 type3 */ #contents.c_sub .cs_list.t3 > ul > li .csl_top .cslt_title {-webkit-line-clamp:2;} #contents.c_sub .cs_list.t3 > ul > li .csl_winning {height:20px;} /* 상세 type3 */ #contents.c_sub .cs_view.t3 {padding:30px;} /* 목록 type4 */ #contents.c_sub .cs_list.t4 .csl_wrap {padding:30px;} #contents.c_sub .cs_list.t4 .cs_top {flex-direction:column-reverse; margin-bottom:10px;} #contents.c_sub .cs_list.t4 .cs_top .sort_wrap.t4 {width:100%; margin-bottom:20px;} #contents.c_sub .cs_list.t4 .cs_top .total_count {width:100%;} } @media all and (max-width:425px) { /* 콘텐츠 */ #contents .c_hero {background-image:url("/images/pic_main_m.jpg");} #contents .c_hero .ch_logo {background-image:url("/images/logo_main_m.png");} #contents .c_hero .ch_deco {height:55vh; max-height:330px;} #contents .c_hero .ch_deco i:nth-child(1) {top:2%;} #contents .c_hero .ch_deco i:nth-child(2) {bottom:23.3%;} #contents .c_hero .ch_deco i:nth-child(3) {right:3%; bottom:21%;} #contents .c_hero .ch_deco i:nth-child(5) {right:26%; bottom:51%;} #contents .c_hero .ch_deco i:nth-child(8) {top:76%;} /* sub */ #contents.c_sub .cs_title {font-size:32px;} #contents.c_sub .cs_top .cs_search {width:100%;} #contents.c_sub .cs_top .csf_popup_open_btn {width:100%;} #contents.c_sub .cs_top .cs_search {width:calc(100% - 45px);} #contents.c_sub .cs_top .cs_search .css_words {width:calc(100% - 109px); margin-left:6px;} #contents.c_sub .cs_top .cs_search .css_btn {width:28px; height:28px; margin-left:0;} #contents.c_sub .cs_top .cs_search .css_dropdown {width:75px; padding:0 20px 0 12px; font-size:12px;} #contents.c_sub .cs_top .cs_search .css_dropdown:before {top:11px; right:10px; width:12px; height:12px;} #contents.c_sub .cs_top .cs_search .css_dropdown li {padding:0 12px; font-size:12px;} #contents.c_sub .cs_top .csf_popup_open_btn {width:40px; height:40px; padding:11px;} #contents.c_sub .cs_top .csf_popup_open_btn span {display:none;} #contents.c_sub .cs_top .csf_popup_open_btn i {margin:0;} #contents.c_sub .cs_top #cs_filter_popup {width:calc(100% + 1px); padding:20px 40px;} #contents.c_sub .cs_top #cs_filter_popup .csfp_content {height:calc(100% - 115px);} #contents.c_sub .cs_top #cs_filter_popup .csfp_btn {padding-bottom:20px;} /* company - about us */ #contents.c_sub .cs_about .csc_section {margin-bottom:80px;} #contents.c_sub .cs_about .csc_are .csca_right .cscar_box {width:100%;} #contents.c_sub .cs_about .csc_are .csc_sign .cscs_box {flex-direction:column; align-items:flex-end;} #contents.c_sub .cs_about .csc_are .csc_sign p {} #contents.c_sub .cs_about .csc_are .csc_sign img {width:80px;} #contents.c_sub .cs_about .csc_history {margin-bottom:0;} #contents.c_sub .cs_about .csc_do .cscd_content p span {display:inline;} #contents.c_sub .cs_about .csc_history .yearly {gap:30px;} #contents.c_sub .cs_about .csc_history .yearly .event {width:calc(100% - 100px);} /* company - contact us */ #contents.c_sub .cs_contact .privacy_popup {height:100%;} #contents.c_sub .cs_contact .privacy_popup .privacy_popup_wrap {height:calc(100% - 50px);} #contents.c_sub .cs_contact .privacy_popup .privacy_contents {overflow:auto; height:calc(100% - 115px);} #contents.c_sub .cs_contact {padding:40px 20px;} #contents.c_sub .cs_contact #csca_contactForm, #contents.c_sub .cs_contact #csco_contactForm {margin-top:20px;} #contents.c_sub .cs_contact .csc_section .csc_form strong {margin-top:5px; margin-bottom:5px;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscafi_box {gap:5px;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscafi_box .cscafi_filename {width:calc(100% - 80px);} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscafi_box .cscafi_file {width:75px;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscofi_box {gap:5px;} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscofi_box .cscofi_filename {width:calc(100% - 80px);} #contents.c_sub .cs_contact .csc_section .csc_form.t2 .cscofi_box .cscofi_file {width:75px;} #contents.c_sub .cs_contact .csc_section .csc_form.t3 strong {margin-top:5px;} #contents.c_sub .cs_contact .csc_section .csc_form.t4 .cscf_wrap span {font-size:14px;} #contents.c_sub .cs_contact .csc_section .csc_form.radio li {width:100%;} #contents.c_sub .cs_contact .csc_section .csc_form.radio li + li {margin:0; margin-top:5px;} #contents.c_sub .cs_contact .csc_section .csc_form_btn {margin-top:20px;} /* 목록 type1 */ #contents.c_sub .cs_list.t1 li {width:100%; padding-left:0; padding-right:0;} /* 상세 type1 */ #contents.c_sub .cs_view.t1 .csv_info .csvi_name {margin-bottom:5px; font-size:16px; line-height:27px;} #contents.c_sub .cs_view.t1 .csv_info .csvi_name.ko {margin:5px 0; font-size:50px; line-height:60px;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content {padding:15px 0;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content.t1 {margin-top:15px;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content > strong {font-size:23px; line-height:32px;} #contents.c_sub .cs_view.t1 .csv_info .csvi_content > strong i {width:32px; margin-top:-16px;} /* 상세 type2 */ #contents.c_sub .cs_view.t2 .csv_info .csvi_name {margin-bottom:5px; font-size:16px; line-height:27px;} #contents.c_sub .cs_view.t2 .csv_info .csvi_name.ko {margin:5px 0; font-size:50px; line-height:60px;} #contents.c_sub .cs_view.t2 .csv_info .csvi_title {margin:5px 0; font-size:40px; line-height:50px;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content {padding:15px 0;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content.t1, #contents.c_sub .cs_view.t2 .csv_info .csvi_content.t2 {margin-top:15px;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content > strong {font-size:23px; line-height:32px;} #contents.c_sub .cs_view.t2 .csv_info .csvi_content > strong i {width:32px; margin-top:-16px;} /* 목록 type3 */ #contents.c_sub .cs_list.t3 > ul > li {width:100%; height:200px; aspect-ratio:auto;} #contents.c_sub .cs_list.t3 > ul > li .csl_top.t1 {height:calc(100% - 37px);} #contents.c_sub .cs_list.t3 > ul > li .csl_top .cslt_title {-webkit-line-clamp:3;} #contents.c_sub .cs_list.t3 > ul > li .csl_winning {height:45px;} /* 상세 type3 */ #contents.c_sub .cs_view.t3 {padding:30px 20px;} #contents.c_sub .cs_view.t3 .csv_top .link {margin-top:10px;} #contents.c_sub .cs_view.t3 .csv_top .link i {width:20px; margin:3px 5px 3px 0;} #contents.c_sub .cs_view.t3 .csv_top .link p {width:60px; line-height:26px;} #contents.c_sub .cs_view.t3 .csv_top .link p.t2 {width:30px;} #contents.c_sub .cs_view.t3 .csv_top .link a {max-width:calc(100% - 85px); padding:3px 0; line-height:20px;} #contents.c_sub .cs_view.t3 .csv_top .link span {width:calc(100% - 85px); padding:3px 0; line-height:20px;} #contents.c_sub .cs_view.t3 .csv_top .link p.t2 + a {max-width:calc(100% - 55px); padding:3px 0; line-height:20px;} #contents.c_sub .cs_view.t3 .csv_top .link p.t2 + span {width:calc(100% - 55px); padding:3px 0; line-height:20px;} #contents.c_sub .cs_view.t3 .csv_nb .csvn_title {width:70px; margin-right:5px; line-height:30px;} #contents.c_sub .cs_view.t3 .csv_nb .csvn_title i {width:30px;} #contents.c_sub .cs_view.t3 .csv_nb li a {max-width:calc(100% - 155px); line-height:30px;} #contents.c_sub .cs_view.t3 .csv_nb .csvn_date {width:80px; padding:0 10px 0 5px; line-height:30px;} #contents.c_sub .cs_view.t3 .csv_content .csvc_cont {font-size:14px; line-height:24px;} #contents.c_sub .cs_view.t3 .csv_content .csvc_cont b {font-weight:800;} #contents.c_sub .cs_view.t3 .csv_content .csvc_cont h1 {font-size:36px; line-height:46px;} #contents.c_sub .cs_view.t3 .csv_content .csvc_cont h2 {font-size:32px; line-height:42px;} #contents.c_sub .cs_view.t3 .csv_content .csvc_cont h3 {font-size:28px; line-height:38px;} #contents.c_sub .cs_view.t3 .csv_content .csvc_cont h4 {font-size:24px; line-height:34px;} #contents.c_sub .cs_view.t3 .csv_content .csvc_cont h5 {font-size:20px; line-height:30px;} #contents.c_sub .cs_view.t3 .csv_content .csvc_cont h6 {font-size:16px; line-height:26px;} /* 목록 type4 */ #contents.c_sub .cs_list.t4 .csl_wrap {padding:30px 20px;} #contents.c_sub .cs_list.t4 .csl_cont > li {padding:15px 5px;} #contents.c_sub .cs_list.t4 .csl_cont > li .csl_box {gap:5px;} #contents.c_sub .cs_list.t4 .csl_cont > li .csl_info span {right:5px;} #contents.c_sub .cs_list.t4 .csl_cont > li .csl_no .notice_icon {width:22px; background-size:22px;} }