:root { --map_loc_title:#fff; --map_loc_title_bg:#0064bc; --map_loc_out:#777; --map_loc_out_sub:red; --map_dt_loc_title_bg:#0064bc; --map_dt_loc_out:#037ce7; --map_loc_title_top3:#fff; --map_loc_title_bg_top3:rgb(226, 0, 0); --map_loc_out_top3:orangered; --map_pin_shadow:rgba(0,0,0,0.2); --map_mk_color1: #000; /* slate-700 */ --map_mk_color2: #00b328; /* gray-700 */ --map_mk_color3: #1e3a8a; /* blue-900 */ --map_mk_color4: #ee53ff; /* emerald-800 */ --map_mk_color5: #ffe731; /* amber-900 */ --map_mk_color6: #7c2d12; /* orange-900 */ --map_mk_color7: #b33300; /* fuchsia-900 */ --map_mk_color8: #b200b3; /* violet-900 */ --map_mk_color9: #1500b3; /* teal-900 */ --map_mk_color10: #b30000; /* warm brown */ --map_mk_color11: #827900; /* zinc-700 */ --post_w: 400px; } body {background:url(/hanji_festival/2026/images/bg_2026.jpg);font-family:var(--neo);} #wrapper {position:relative; width:100%; height:auto; min-height:100%; -webkit-overflow-scrolling:touch; } #wrapper:before, #wrapper:after {content:""; position:fixed; bottom:0; width:calc(50% - 750px); background-size:cover !important; opacity:0.45;} #wrapper:before {} #wrapper:after {} #wrapper header {position:fixed; top:0; left:0; width:100%; z-index:1000001;transition: all .3s; padding:0 0;transform:translateY(0%); font-size:0; height:calc(var(--h_default) + var(--default_nav)); z-index:2; background-size:cover !important; background-position:bottom center !important; overflow:hidden;} #wrapper header:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.65);} #wrapper header.open {height:calc(var(--h_default) + var(--default_nav) + 200px);} #wrapper header.hid {transform:translateY(-100%) !important;transition: all .3s;} #wrapper header .hwrp {position:relative; max-width:1300px; left:0; right:0; margin:auto; height:100%; overflow:hidden; } #wrapper header .h_default {position:relative; height:var(--h_default);} #wrapper header .logo {position:absolute; top:calc(50% + 25px); left:50%; transform:translate(-50%,-50%); width:250px; background:url(/hanji_festival/2026/images/logo_2026.png) no-repeat; background-position:center center !important; background-size:cover !important; cursor:pointer; z-index:1;} #wrapper header .logo:after {content:""; display:block; padding-top:21%;} #wrapper header .logo step {position:absolute; top:-18px; left:5px; font-family:var(--neo); font-weight:800; color:#fff; font-size:11px; line-height:110%; font-style:normal;} #wrapper header .logo img {width:100%;} #wrapper header ul.sns_bnr {position:absolute; top:30px; right:30px; white-space:nowrap; z-index:1; display:flex;} #wrapper header ul.sns_bnr li {flex:1; line-height:1; margin-left:10px; cursor:pointer; } #wrapper header ul.sns_bnr li:first-child {margin:0;} #wrapper header ul.sns_bnr li i {color:#ddd; transition:all .3s; font-size:20px;} #wrapper header ul.sns_bnr li:hover i {color:#fff;} #wrapper header nav {display: flex; height:100%; transition:all .3s; border-left:1px solid transparent; z-index:1; position:relative;} #wrapper header nav > li {flex: 1; position:relative; transition:all .3s; } #wrapper header nav > li.spc {position:absolute; top: 0; right: 0; height: var(--default_nav);font-size: 0; white-space: nowrap;} #wrapper header nav > li.spc .s_pos {position:absolute; top: 50%; right: 0; transform: translateY(-50%); font-size: 0; white-space: nowrap;} #wrapper header nav > li.spc .s_pos > div {display: inline-block; vertical-align: top; position:relative; margin-left:12px;} #wrapper header nav > li.spc .s_pos > div a {display: block; padding: 6px 27px; font-size: 0; font-weight: 500; background: var(--spc_btn); color: #c6eaff; border-radius: 30px; position:relative; transition: all .3s;} #wrapper header nav > li.spc .s_pos > div a:hover {background: var(--spc_btn_hover);} #wrapper header nav > li.spc .s_pos > div a span, #wrapper header nav > li.spc .s_pos > div a em {display:inline-block; vertical-align:middle;} #wrapper header nav > li.spc .s_pos > div a span {font-size:12px;} #wrapper header nav > li.spc .s_pos > div a em {font-style:normal; font-size:11px; padding-left:5px; color:#86ff58;} #wrapper header nav > li.on {} #wrapper header nav > li a {transition: all .3s;} #wrapper header nav > li > a {position:relative; height:var(--default_nav); display:block;} #wrapper header nav > li.old_festival > a {} #wrapper header nav > li > a span {position:absolute; top:calc(50% + 0px); left:0; transform:translateY(-50%); line-height:100%;font-family: var(--neo); font-weight: 700;font-size: 15px; color:#ddd;padding:0;transition:all .3s; text-align:left;letter-spacing:0em; white-space:nowrap;} #wrapper header nav > li.old_festival > a span {font-weight: 700;font-size: 13px; color:#ddd;padding:10px 20px; border:1px dashed rgba(255,255,255,0.3); border-radius:30px; transition:all .3s;} #wrapper header nav > li.old_festival > a span img {position:absolute; top:-70px; left:50%; transform:translateX(-50%); width:80px;} #wrapper header nav > li:hover > a span {#fff;} #wrapper header nav > li.old_festival > a span:hover {border:1px dashed rgba(255,255,255,0.9);} #wrapper header nav > li.on > a span {color:#82cbff;} #wrapper header nav > li > a > i {position: absolute; transform: translateY(-50%) rotate(0deg);top: 50%; right: 25px; font-size: 15px; transition: all .3s; display:none !important;} #wrapper header nav > li:hover > a > i {transform: translateY(-50%) rotate(180deg); } #wrapper header nav > li ul.sub_cate1 {position:absolute; top:calc(var(--default_nav) + 10px); left:0; width:100%; visibility: visible; opacity: 0; transition: all .3s; padding:0 10px;} #wrapper header .hwrp:hover nav > li ul.sub_cate1 {opacity: 1; visibility: visible; top:calc(var(--default_nav) - 0px); } #wrapper header nav > li ul.sub_cate1 > li {display: inline-block; width: 100%;} #wrapper header nav > li ul.sub_cate1 > li a {display: block; position: relative; padding:3px 0; letter-spacing:0;} #wrapper header nav > li ul.sub_cate1 > li.on > a {#82cbff} #wrapper header nav > li ul.sub_cate1 > li a span {display: inline-block; font-size: 12px; color: #eee; padding:0; position:relative; font-family:var(--neo); font-weight:500; transition:all .2s;} #wrapper header nav > li ul.sub_cate1 > li a:hover span {color:#fff; } #wrapper header nav > li ul.sub_cate1 > li.on > a span {color:#82cbff; font-weight:bold;} #wrapper header nav > li .empty_box {position:absolute; top:calc(var(--default_nav) + 20px); left:0; width:100%; height:calc(100% - var(--default_nav)); background:yellow; opacity:0; transition:all .3s;} #wrapper header.open nav > li .empty_box {top:var(--default_nav); opacity:1;} #wrapper header nav > li .empty_box a {position:absolute; top:0; left:0; width:100%; height:100%; background:orange;} #wrapper header nav > li > a span em {display:inline-block; vertical-align:top; margin-left:5px; position:relative;} #wrapper header nav > li > a span em now {position:absolute; top:0px; left:0; /*padding:3px; border-radius:3px; */font-family: var(--neo); font-weight:normal; line-height:100%; background:red; font-size:0; color:#fff; font-style:normal; white-space:nowrap; width:4px; height:4px; border-radius:100%;} #wrapper header nav > li ul.sub_cate1 > li a span em {display:inline-block; vertical-align:top; margin-left:5px; position:relative;} #wrapper header nav > li ul.sub_cate1 > li a span em s_now {position:absolute; top:0px; left:0; /*padding:3px; border-radius:3px; */font-family: var(--neo); font-weight:normal; line-height:100%; background:red; font-size:0; color:#fff; font-style:normal; white-space:nowrap; width:4px; height:4px; border-radius:100%;} #wrapper header button {position:absolute; top:0; left:0; width:80px; border: 0; padding:0; margin: 0; cursor: pointer; background: transparent; transition:all .3s; z-index:1; display:none;} #wrapper header button:after {content:""; display: block; padding-top:100%;} #wrapper header button i {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:35px; color:#fff;transition:all .3s; } #wrapper header .count_day {position:absolute; top:0%; right:-15px; transform:translateX(100%); font-size:0; color:#fff; } #wrapper header .count_day .dday, #wrapper header .count_day .now_festival {display:inline-block !important; vertical-align:middle;width:100%;} #wrapper header .count_day .dday span, #wrapper header .count_day .dday em {display:inline-block; vertical-align:middle;} #wrapper header .count_day .dday span {font-family:var(--neo); font-weight:800; color:#ddd; font-size:20px;} #wrapper header .count_day .dday em {font-family:var(--neo); font-weight:900; font-size:20px; color:#fff; font-style:normal;} #wrapper header .count_day .now_festival {font-family:var(--neo); font-weight:700; color:#333; line-height:110%; margin-top:10px;font-size:0; display: none !important;} #wrapper header .count_day .now_festival span {display:inline-block; font-size:12px; font-weight:900; color:red;} #wrapper header .count_day .now_festival span.ready {color:orange;} #wrapper header .count_day .now_festival span.ing {color:#438919;} #wrapper header .count_day .now_festival span.pass {color:red;} #wrapper header ul.schedule_box_ing {position:absolute; bottom:20px; right:20px; width:250px; font-size:0; } #wrapper header ul.schedule_box_ing > li {display:inline-block; vertical-align:top; width:100%; } #wrapper header ul.schedule_box_ing > li .go_content {display:inline-block; position:relative; background:#009962; color:#fff; font-size:13px;margin:20px 0 0 10px; padding:10px 0; max-width:150px; width:100%; text-align:center;font-family:var(--neo);font-weight:800; border-radius:35px;} #wrapper header ul.schedule_box_ing > li ul.date_check {display:inline-block; vertical-align:top; width:100%; padding-left:4px;} #wrapper header ul.schedule_box_ing > li ul.date_check li {display:inline-block; vertical-align:top; width:50%; font-size:0; margin:1px 0; padding-left:8px; } #wrapper header ul.schedule_box_ing > li ul.date_check li.now {padding:0 0 30px 0;font-family:var(--neo);font-weight:800; width:100%; border:0; margin:-15px 0 0 -3px;} /*#wrapper header ul.schedule_box_ing > li ul.date_check li.now {position:absolute; top:0; right:0; width:auto; ;font-family:var(--neo);font-weight:800;}*/ #wrapper header ul.schedule_box_ing > li ul.date_check li.now span {font-size:14px !important; letter-spacing:-0.05em;} #wrapper header ul.schedule_box_ing > li ul.date_check li.now span em {font-style:normal;} #wrapper header ul.schedule_box_ing > li ul.date_check li.now span.ready em {color:orangered;} #wrapper header ul.schedule_box_ing > li ul.date_check li.now span.ing em {color:green;} #wrapper header ul.schedule_box_ing > li.none {width:100%; padding:30px 0; text-align:center; font-size:12px; color:red; background:#fafafa; border-radius:7px;} #wrapper header ul.schedule_box_ing > li ul.date_check li span {display:inline-block; vertical-align:top; line-height:110%; font-family:var(--neo);font-weight:800; position:relative; width:100%; } #wrapper header ul.schedule_box_ing > li ul.date_check li .dc_t {color:rgba(0,0,0,0.6);font-size:11px; margin-bottom:3px;} #wrapper header ul.schedule_box_ing > li ul.date_check li .dc_c {color:#333; font-weight:800;font-size:12px;letter-spacing:0em;} #wrapper header ul.schedule_box_ing > li ul.date_check li .dc_c em {position:absolute; top:50%; left:90px; transform:translateY(-50%); font-style:normal; display:inline-block; vertical-align:middle; background:rgba(0,0,0,0.2); border-radius:3px; line-height:100%; width:16px; height:16px; line-height:16px; text-align:center; margin-left:2px; font-size:11px; font-family:var(--bar);font-weight:normal; color:#fff;} #wrapper header ul.schedule_box_ing > li ul.detail_info {display:inline-block; vertical-align:top; width:100%; padding:10px 0 0 7px;} #wrapper header ul.schedule_box_ing > li ul.detail_info li {display:inline-block; vertical-align:top; width:100%; font-size:0; margin:0; } #wrapper header ul.schedule_box_ing > li ul.detail_info li span {display:inline-block; vertical-align:top; line-height:120%; font-family:var(--neo);font-weight:700; position:relative; letter-spacing:0em;} #wrapper header ul.schedule_box_ing > li ul.detail_info li .dc_t {color:rgba(0,0,0,0.6);font-size:11px; width:40px;} #wrapper header ul.schedule_box_ing > li ul.detail_info li .dc_t:before {content:"ㆍ";} #wrapper header ul.schedule_box_ing > li ul.detail_info li .dc_c {color:#333; font-weight:700;font-size:11px;width:calc(100% - 40px);} #wrapper header .sd_bg {position:absolute; bottom:0; right:0; width:500px; z-index:10;} #wrapper header .sd_gra {position:absolute; bottom:-60px; right:-20px; width:80%; height:1px;} #wrapper header .sd_gra .gbw {position:absolute; left:0; width:100%; } #wrapper header .sd_gra .gbw:after {content:""; display:block; padding-top:80%; } #wrapper header .sd_gra .gbw.str {bottom:0; z-index:1;border:0px solid red;} #wrapper header .sd_gra .gbw.sha {top:0; opacity:0.3; transform:translateY(-15%);border:0px solid blue;} #wrapper header .sd_gra .gbw .step {position:absolute;left:0; width:100%;} #wrapper header .sd_gra .gbw.str .step {bottom:0; } #wrapper header .sd_gra .gbw.sha .step {top:0;} #wrapper header .sd_gra .gbw.sha .step.sha_l_01 {top:-10%;} #wrapper header .sd_gra .gbw img {width:100%;} #wrapper header .sd_sha {position:absolute; bottom:0; left:0; width:500px; height:100%; opacity:0.1; z-index:10;} #wrapper header .sd_sha img {width:100%;} #wrapper .contents {position:relative; min-height:100%; height:auto; padding: calc(var(--h_default) + var(--default_nav)) 0px var(--lay_btm_pad) 0px; text-align:right; font-size:0; z-index:1; } /**/ #wrapper .contents .in_con {display:inline-block; vertical-align:top; position:relative; width:100%; padding:0; text-align:left;} #wrapper .contents .in_con > h1 {position:relative; display:inline-block; vertical-align:top; width:100%; font-weight:900; font-family:var(--neo); font-size:50px; color:#000; line-height:110%; margin-bottom:40px;} #wrapper .contents .in_nav {display:inline-block; vertical-align:top; width:120px; height:100%; border:0px solid orange; position:fixed; top:0; right:0;z-index:1000;} #wrapper .contents .ic_bx {position:relative;font-size:0; text-align:left; background:#f5f3f3; border-radius:50px; height:50px; overflow:hidden; left:0; right:0; max-width:1250px; margin:40px auto; padding:0 15px;} #wrapper .contents .ic_bx .ib_title, #wrapper .contents .ic_bx .ib_con {display:inline-block; vertical-align:middle; } #wrapper .contents .ic_bx .ib_title {width:135px;} #wrapper .contents .ic_bx .ib_con {width:100%;} #wrapper .contents .ic_bx h3 {position:absolute; top:50%; left:55px; transform:translateY(-50%); font-size:12px;font-weight:600; color:#000; letter-spacing:-0.05em; } #wrapper .contents .ic_bx i {position:absolute; top:50%; left:30px; transform:translateY(-50%); font-size:20px;color:#000; } #wrapper .contents .ic_bx .slide {padding:18px 0 0 135px; animation: show_con 1s forwards; animation-delay: 0.5s; opacity:0;} #wrapper .contents .ic_bx .slide div {font-weight:600; font-family:var(--neo); font-size:13px; color:#000; line-height:110%; text-overflow: ellipsis; white-space: nowrap; overflow:hidden; letter-spacing:-0.05em;} #wrapper .contents .ic_bx .slide div b_name {display:inline-block; color:#999; font-weight:800; padding-right:5px;} #wrapper .contents .ic_bx .slide div span {display:inline-block; color:#999; font-weight:700; padding-left:5px; font-size:12px;} #wrapper .contents .page_tbox {font-size:15px; text-align:left; position:sticky; top:0; left:0; width:100%; background:url(/hanji_festival/2026/images/bg_2026.jpg);z-index:5; } #wrapper .contents .page_tbox h1, #wrapper .contents .page_tbox h2, #wrapper .contents .page_tbox p {position:relative; line-height:140%;left:0; right:0; max-width:1200px; margin:auto;} #wrapper .contents .page_tbox h1 {font-weight:900; font-family:var(--neo); font-size:30px; color:#000; letter-spacing:-0.05em;padding:30px 10px; } #wrapper .contents .page_tbox h1 span {font-weight:900; color:#085057; display:inline-block; padding-left:10px;;} #wrapper .contents .page_tbox h2 {font-weight:800; font-family:var(--neo); font-size:20px; color:#333; letter-spacing:-0.05em; padding:0 0 5px 0;} #wrapper .contents .page_tbox p {font-weight:700; font-family:var(--neo); font-size:15px; color:#000; padding:10px 0 0 0; opacity:0.6; display:none;} #wrapper .contents .bg_imgbx {position:absolute; top:0; left:0; width:100%; height:100%; background-position:center center !important; background-size:cover !important; z-index:2;animation: zoom_eff 20s cubic-bezier(.25,.57,.25,.64) infinite;} #wrapper .contents .bg_imgbx.festival {background:url(/hanji_festival/2024/images/bgp_festival.jpg) no-repeat;} #wrapper .contents .bg_imgbx.place {background:url(/hanji_festival/2024/images/bgp_place.jpg) no-repeat;} #wrapper .contents .bg_imgbx.dp_1 {background:url(/hanji_festival/2024/images/bgp_dp1.jpg) no-repeat;} #wrapper .contents .bg_imgbx.dp_2 {background:url(/hanji_festival/2024/images/bgp_dp2.jpg) no-repeat;} #wrapper .contents .bg_imgbx.dp_3 {background:url(/hanji_festival/2024/images/bgp_dp3.jpg) no-repeat;} #wrapper .contents .bg_imgbx.dp_4 {background:url(/hanji_festival/2024/images/bgp_dp4.jpg) no-repeat;} #wrapper .contents .bg_imgbx.dp_5 {background:url(/hanji_festival/2024/images/bgp_dp5.jpg) no-repeat;} #wrapper .contents .bg_imgbx.dp_6 {background:url(/hanji_festival/2024/images/bgp_dp6.jpg) no-repeat;} #wrapper .contents .bg_imgbx.dp_7 {background:url(/hanji_festival/2024/images/bgp_dp7.jpg) no-repeat;} #wrapper .contents .bg_imgbx.fg_notice {background:url(/hanji_festival/2024/images/bgp_notice.jpg) no-repeat;} #wrapper .contents .bg_imgbx.support {background:url(/hanji_festival/2024/images/bgp_support.jpg) no-repeat;} #wrapper .contents .bg_imgbx.gallery {background:url(/hanji_festival/2024/images/bg_hanfs.jpg) no-repeat;} #wrapper .contents .bg_mov {position:absolute; top:0; left:0; width:100%; height:100%; animation: show_con 1s forwards; animation-delay: 3.5s; opacity:0;z-index:10000;} #wrapper .contents .bg_mov:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.35; z-index:2;} #wrapper footer {position:absolute; left: 0;bottom: 0; width:100%; height:var(--lay_btm_pad); transition: all .3s; z-index:1000;} #wrapper footer:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.9;} #wrapper footer > .copy {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; font-size:11px; color:rgba(255,255,255,0.7); line-height:1; text-align:center; z-index:1;} #wrapper footer > .copy span {color:#fff; display:inline-block; padding:0 10px;} #wrapper footer .btm_info {position:relative; margin:0 auto; max-width:var(--default_wd); width:100%; padding:50px 20px; font-size:0;text-align:center;} #wrapper footer .btm_info .logo {display:inline-block; vertical-align:top; width:100%;} #wrapper footer .btm_info .logo img {max-width:200px; width:100%;} #wrapper footer .btm_info .info_box {display:inline-block; vertical-align:top; width:100%; text-align:center; padding:50px 0 0 0px; position:relative; font-size:0;} #wrapper footer .btm_info .detail {display:inline-block; vertical-align:top; font-size:0; text-align:left; padding-left:50px;} #wrapper footer .btm_info .detail span {display:inline-block; vertical-align:middle; padding:2px 10px 2px 0; font-size:12px; color:#555; line-height:150%;font-family: var(--neo); font-weight: 700;} #wrapper footer .btm_info .detail span.cmp {width:100%; padding:0px 10px 10px 0; font-size:15px; color:#000; font-weight: 800;} #wrapper footer .btm_info .detail span a {color:#555;} #wrapper footer .btm_info .detail span i {display:inline-block; padding-right:5px; vertical-align:middle; color:#000;} #wrapper footer .btm_info .detail span em {display:inline-block; padding-right:5px; font-style:normal; color:rgba(0,0,0,0.6);} #wrapper footer .btm_info p {display:inline-block; width:100%; font-size:11px; color:rgba(0,0,0,0.45); padding-top:7px;} #wrapper footer .btm_info .rest {position:absolute; top:0; right:0; width:200px; } #wrapper footer .btm_info .copy {display:inline-block; width:100%; font-size:11px; color:rgba(0,0,0,0.7); padding-top:20px;} #wrapper footer .btm_info .copy span {color:#000; display:inline-block; padding:0 10px;} #wrapper footer .btm_info ul.sns_bnr {position:relative; margin-top:25px; font-size:0; text-align:center;} #wrapper footer .btm_info ul.sns_bnr li {display:inline-block; vertical-align:middle; font-size:20px; margin-right:10px; color:#000;} #wrapper footer .btm_info ul.sns_bnr li:last-child {margin:0;} #wrapper footer ul.schedule_box_ing {font-size:0; display:inline-block; vertical-align:top; width:300px; text-align:left; border:1px solid red;} #wrapper footer ul.schedule_box_ing > li {display:inline-block; vertical-align:top; width:100%; } #wrapper footer ul.schedule_box_ing > li .go_content {display:inline-block; position:relative; background:#009962; color:#fff; font-size:13px;margin:20px 0 0 10px; padding:10px 0; max-width:150px; width:100%; text-align:center;font-family:var(--neo);font-weight:800; border-radius:35px;} #wrapper footer ul.schedule_box_ing > li ul.date_check {display:inline-block; vertical-align:top; width:100%; } #wrapper footer ul.schedule_box_ing > li ul.date_check li {display:inline-block; vertical-align:top; max-width:200px; width:50%; font-size:0; margin:1px 0;} #wrapper footer ul.schedule_box_ing > li ul.date_check li.now {padding:0 0 30px 0;font-family:var(--neo);font-weight:800; width:100%; border:0; margin:-15px 0 0 -3px;} /*#wrapper footer ul.schedule_box_ing > li ul.date_check li.now {position:absolute; top:0; right:0; width:auto; ;font-family:var(--neo);font-weight:800;}*/ #wrapper footer ul.schedule_box_ing > li ul.date_check li.now span {font-size:14px !important; letter-spacing:-0.05em;} #wrapper footer ul.schedule_box_ing > li ul.date_check li.now span em {font-style:normal;} #wrapper footer ul.schedule_box_ing > li ul.date_check li.now span.ready em {color:orangered;} #wrapper footer ul.schedule_box_ing > li ul.date_check li.now span.ing em {color:green;} #wrapper footer ul.schedule_box_ing > li.none {width:100%; padding:30px 0; text-align:center; font-size:12px; color:red; background:#fafafa; border-radius:7px;} #wrapper footer ul.schedule_box_ing > li ul.date_check li span {display:inline-block; vertical-align:top; line-height:110%; font-family:var(--neo);font-weight:800; position:relative; width:100%; } #wrapper footer ul.schedule_box_ing > li ul.date_check li .dc_t {color:rgba(0,0,0,0.6);font-size:11px; margin-bottom:3px;} #wrapper footer ul.schedule_box_ing > li ul.date_check li .dc_c {color:#333; font-weight:800;font-size:12px;letter-spacing:0em;} #wrapper footer ul.schedule_box_ing > li ul.date_check li .dc_c em {position:absolute; top:50%; left:90px; transform:translateY(-50%); font-style:normal; display:inline-block; vertical-align:middle; background:rgba(0,0,0,0.2); border-radius:3px; line-height:100%; width:16px; height:16px; line-height:16px; text-align:center; margin-left:2px; font-size:11px; font-family:var(--bar);font-weight:normal; color:#fff;} #wrapper footer ul.schedule_box_ing > li ul.detail_info {display:inline-block; vertical-align:top; width:100%; padding:10px 0 0 0px;} #wrapper footer ul.schedule_box_ing > li ul.detail_info li {display:inline-block; vertical-align:top; width:100%; font-size:0; margin:0; } #wrapper footer ul.schedule_box_ing > li ul.detail_info li span {display:inline-block; vertical-align:top; line-height:120%; font-family:var(--neo);font-weight:700; position:relative; letter-spacing:0em;} #wrapper footer ul.schedule_box_ing > li ul.detail_info li .dc_t {color:rgba(0,0,0,0.6);font-size:11px; width:40px;} #wrapper footer ul.schedule_box_ing > li ul.detail_info li .dc_t:before {content:"ㆍ";} #wrapper footer ul.schedule_box_ing > li ul.detail_info li .dc_c {color:#333; font-weight:700;font-size:11px;width:calc(100% - 40px);} #wrapper footer ul.schedule_box_btm {position:absolute; top:0; left:0; right:0; margin:auto; max-width:1400px; width:100%; height:calc(100% - 170px); display:flex; border-radius:10px; overflow:hidden; background:#fff; border:1px solid #e9e9e9; z-index:1;} #wrapper footer ul.schedule_box_btm > li {flex:1; position:relative; border-right:1px dashed #e9e9e9;} #wrapper footer ul.schedule_box_btm > li:last-child {border:0;} #wrapper footer ul.schedule_box_btm > li.today {background:#fafff4;} #wrapper footer ul.schedule_box_btm > li .day_wrap {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden;} #wrapper footer ul.schedule_box_btm > li .day_wrap .w_info {position:absolute; top:0; left:0; width:100%; height:60px; z-index:1; background:#fafafa; border-bottom:1px solid #eee;} #wrapper footer ul.schedule_box_btm > li .day_wrap .w_info .i_no, #wrapper footer ul.schedule_box_btm > li .day_wrap .w_info .i_w {position:absolute; top:50%; transform:translateY(-50%);} #wrapper footer ul.schedule_box_btm > li .day_wrap .w_info .i_no {left:25px; font-weight:800; font-size:14px; color:#000; letter-spacing:-0.05em;} #wrapper footer ul.schedule_box_btm > li .day_wrap .w_info .i_w {right:25px;font-weight:500; font-size:12px; color:#555; padding:0px 0 0 0;} #wrapper footer ul.schedule_box_btm > li .day_wrap .no_mov {position:absolute; bottom:-40px; right:0; transform:translateX(100%); font-size:170px; font-weight:normal; font-family:var(--GB); line-height:90%; transition:all .3s; opacity:0.05; display:none;} #wrapper footer ul.schedule_box_btm > li .day_wrap:hover .no_mov {transform:translateX(0%);} #wrapper footer ul.schedule_box_btm > li .day_wrap .w_detail {position:absolute; bottom:0; left:0; width:100%; height:calc(100% - 60px); z-index:1; padding:20px 25px;} #wrapper footer ul.schedule_box_btm > li .day_wrap .w_detail {overflow-y:overlay;} #wrapper footer ul.schedule_box_btm > li .day_wrap .w_detail:: {-ms-overflow-style: none;} #wrapper footer ul.schedule_box_btm > li .day_wrap .w_detail::-webkit-scrollbar {background: transparent; width:5px; height:5px; border-radius:15px;} #wrapper footer ul.schedule_box_btm > li .day_wrap .w_detail::-webkit-scrollbar-thumb {background:#e9e9e9; border-radius:15px; } @media screen and (max-width: 1800px){ #wrapper header .sd_bg {display:none;} } @media screen and (max-width: 1500px){ #wrapper .contents .in_nav {display:inline-block; vertical-align:top; width:120px; height:100%; border:0px solid orange; position:fixed; top:0; right:0;z-index:1000;} #wrapper .notice_area {display:none;} } @media screen and (max-width: 1160px){ #wrapper header {padding:0; height:80px; background:url(/hanji_festival/2026/images/bg_2026.jpg) !important; } #wrapper header:after {display:none;} #wrapper header .bg_mov {display:none;} #wrapper header .logo {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:200px; } #wrapper header .logo em {position:absolute; top:-16px; left:initial; right:-15px;} #wrapper header .h_default {height:100%;} #wrapper header ul.sns_bnr {display:none;} #wrapper header button {display:block;} #wrapper header button i {color:#000;} #wrapper header .count_day {display:block;} #wrapper header .hwrp .char {display:none;} #wrapper header nav > li.old_festival > a span img {display:none;} #wrapper .contents {padding: 80px 0 var(--lay_btm_pad) 0;} #wrapper .contents .in_con {padding:20px 50px 50px 50px;} #wrapper .contents .ic_bx {margin:0px auto; padding:0px;} #wrapper .contents .page_tbox {top:0;} #wrapper .contents .page_tbox h1 {font-size:22px; } #wrapper .contents .ic_bx i {left:20px; } #wrapper .contents .ic_bx h3 {left:45px;} #wrapper footer {background:transparent;} #wrapper footer:after {display:none;} #wrapper footer > .copy {color:rgba(0,0,0,0.7); } #wrapper footer > .copy span {color:#000; } #wrapper footer ul.schedule_box_btm {display:none;} #wrapper footer .btm_info {position:relative; transform:none; top:0; height:auto; padding:0; background:#fff;} #wrapper footer .btm_info:before {display:none;} } @media screen and (max-width: 650px){ #wrapper header {height:55px; } #wrapper header .logo {width:130px;} #wrapper header .logo em {} #wrapper header .logo em {top:-11px; font-size:8px; } #wrapper header button {width:55px;} #wrapper header button i {font-size:20px;} #wrapper header .count_day {right:15px;} #wrapper header .count_day .dday span {font-size:13px;} #wrapper header .count_day .dday em {font-size:13px;} #wrapper header .count_day .now_festival {margin-top:5px; display:none;} #wrapper header .count_day .now_festival span {font-size:10px;} #wrapper .contents {padding: 55px 0 var(--lay_btm_pad) 0;} #wrapper .contents .ic_bx {left:0; right:0; margin:0 auto; width:calc(100% - 10px); border-radius:7px; height:40px; overflow:hidden;} #wrapper .contents .ic_bx h3 {left:30px; font-size:12px;} #wrapper .contents .ic_bx i {left:10px; font-size:15px;} #wrapper .contents .ic_bx .slide {padding:13px 0 0 115px;} #wrapper .contents .ic_bx .slide div {font-size:12px; } #wrapper .contents .ic_bx .slide div span {font-size:11px;} #wrapper .contents .page_tbox {font-size:14px; position:sticky; top:0; padding:20px 15px 15px 15px;} #wrapper .contents .page_tbox h1 {font-size:17px; padding:0;} #wrapper .contents .page_tbox h1 span {padding-left:5px;;} #wrapper .contents .page_tbox h2 {font-size:14px;} #wrapper .contents .in_con {padding:0;} #wrapper footer {padding:25px 10px; text-align:center;} #wrapper footer .btm_info .logo {width:120px; } #wrapper footer .btm_info ul.sns_bnr li {margin-right:7px;} #wrapper footer .btm_info .copy {font-size:10px; padding:10px 0 15px 0;} } /**/ /**/ .title_area {position:relative; width:100%; left:0; right:0; margin:100px auto 0 auto; font-family:var(--neo); text-align:left; display:none;} .title_area h1 {font-weight:900; font-size:50px; color:#000;line-height:110%; } .title_area p {font-weight:800; font-size:40px; color:#333;line-height:110%;padding:5px 0 0 0; display:none;} .prj_sc_all {position:relative; width:100%; left:0; right:0; margin:0 auto; padding:70px;} .prj_sc_all ul.pv_list {position:relative; font-size:0;} .prj_sc_all ul.pv_list > li {display:inline-block; vertical-align:top; width:100%; margin:0 0 45px 0; position:relative; font-size:0;} .prj_sc_all ul.pv_list > li:last-child {margin-bottom:0; } .pb_head {position:relative; padding:0 0 20px 5px;font-family:var(--neo);} .pb_head h2 {position:relative;font-size:25px; font-weight:900; color:#333;line-height:130%;} .pb_head p {position:relative;font-size:13px; font-weight:700; color:#999; padding-top:3px; line-height:130%;} .festival_sc_all {position:relative; width:100%; left:0; right:0; margin:0 auto; padding:0px;} .festival_sc_all .thanks {position:relative; left:0; right:0; margin:auto; max-width:1100px; font-size:15px; font-weight:500; color:#333; padding:20px 20px 0 20px; line-height:180%;} @media screen and (max-width: 1160px){ .festival_sc_all .thanks {padding:0px 20px 0 20px; line-height:180%;} } @media screen and (max-width: 650px){ .fb_head {padding:0 0 5px 5px;} .fb_head h2 {font-size:14px; } .festival_sc_all .thanks {padding:0px 20px 20px 20px; font-size:12px; line-height:155%;} .festival_sc_all .thanks .hd {display:none;} } /**/ .hanji_intro {position:relative; left:0; right:0; max-width:1150px; margin:auto; padding:30px 0 80px 0;} .hanji_intro .intbx {position:relative; left:0; right:0; max-width:100%; margin:auto; } .hanji_intro .intbx .pic, .hanji_intro .intbx .map_area, .hanji_intro .intbx .poster, .hanji_intro .intbx .ment {display:inline-block; vertical-align:top; position:relative;} .hanji_intro .intbx .pic {width:400px;} .hanji_intro .intbx .map_area {width:100%; height:400px; margin-top:40px;} .hanji_intro .intbx .pic img {width:100%; border-radius:10px;} .hanji_intro .intbx .ment {width:calc(100% - calc(var(--post_w))); font-weight:500; line-height:200%; font-size:15px; padding:15px 70px 0 0px ; color:#333; text-align:left;} .hanji_intro .intbx .ment point {display:inline-block; width:100%; font-weight:600; line-height:190%; font-size:22px; padding:0px 0 10px 0; color:#000;} .hanji_intro .intbx .ment cp {display:inline-block; width:100%; font-weight:600; line-height:190%; font-size:18px; padding:30px 0 0px 0; color:#333; text-align:left;} .hanji_intro .intbx .ment cp name {font-weight:700; font-size:22px; color:#000;} .hanji_intro .intbx .poster {width:var(--post_w); margin-top:-30px; text-align:center;} .hanji_intro .intbx .poster img {width:100%; border:1px dashed #c9c9c9} .hanji_intro .intbx .poster span {display:inline-block; width:100%; font-size:11px; letter-spacing:-0.05em; padding:10px 0 0 0;} .hanji_intro .intbx .official_box {max-width:400px; width:100%; display:inline-block; margin:45px 0 0 0; padding:20px; background:#fff; border:1px dashed #c9c9c9; border-radius:10px; transition:all .3s; position:relative; cursor:pointer;} .hanji_intro .intbx .official_box .ob_btn {display:inline-block; white-space:nowrap; font-size:0; } .hanji_intro .intbx .official_box .ob_btn i, .hanji_intro .intbx .official_box .ob_btn span, .hanji_intro .intbx .official_box p {display:inline-block; vertical-align:middle; line-height:1;} .hanji_intro .intbx .official_box .ob_btn i {font-size:35px; color:red;} .hanji_intro .intbx .official_box .ob_btn span {font-size:14px; font-weight:600; color:#000; letter-spacing:-0.05em; padding-left:7px;} .hanji_intro .intbx .official_box p {width:100%;font-size:11px; line-height:140%; padding:10px 0 0 4px; color:#999;} .hanji_intro .intbx .official_box img {position:absolute; bottom:-15px; right:-15px; width:170px;} .hanji_intro .intbx .official_box:hover {border-color:#000;} .hanji_intro .where {position:relative; left:0; right:0; max-width:1050px; margin:50px auto 0 auto; font-size:0;} .hanji_intro .where .whead {position:relative; padding: 0 5px 20px 10px;} .hanji_intro .where .whead h3, .hanji_intro .where .whead p {position:relative; display:inline-block; width:100%;} .hanji_intro .where .whead h3 {font-weight:600; color:#000; font-size:22px;} .hanji_intro .where .whead p {font-weight:500; color:#777; font-size:13px; padding:7px 0 0 0;} .hanji_intro .map_poly {position:absolute;top:0; left:0;width:100%; height:100%; border-radius:10px; overflow:hidden;} .hanji_intro .map_poly:after {content:""; display:block; padding-top:100%;} .hanji_intro .map_poly .kakao {position:absolute; top:0; left:0; width:100%; height:100%;} .hanji_intro .map_poly .kakao .poly_title {background: white; border: 1px solid #555; padding: 5px 12px; border-radius: 30px; font-size: 12px; font-weight: 600; line-height:100%; box-shadow: 2px 2px 6px rgba(0,0,0,0.3); white-space: nowrap;} .hanji_intro ul.addr_info {position:relative; padding:15px 10px 0 10px;} .hanji_intro ul.addr_info li {position:relative; font-size:12px; font-weight:600; color:#333; line-height:110%; margin-top:5px;} .hanji_intro ul.addr_info li.wrn {color:red; font-size:11px; font-weight:600; padding:0 0 0 3px;} .hanji_intro .main_poster {display:inline-block; vertical-align:top; position:relative; width:320px; padding:0 28px 0 0;} .hanji_intro .main_poster img {width:100%; border-radius:10px;} .hanji_intro .main_vod {display:inline-block; vertical-align:top; position:relative; left:0; right:0; margin:auto; border-radius:10px; overflow:hidden; width:100%;} .hanji_intro .main_vod:after {content:""; display:block; padding-top:56.25%;} .hanji_intro .main_vod iframe {position:absolute; top:0; left:0; width:100% !important; height:100% !important;} @media screen and (max-width: 1160px){ .hanji_intro {padding:30px 0 0px 0;} .hanji_intro .intbx {text-align:center;} .hanji_intro .intbx .ment {width:100%; padding:0px 30px 0 30px;} .hanji_intro .intbx .map_area {width:100%; padding:30px 0 0 0px;;} .hanji_intro .intbx .poster {width:100%; margin-top:35px; padding:0 20px;} .hanji_intro .intbx .poster img {max-width:700px;} .hanji_intro .intbx .poster span {display:none;} .hanji_intro .intbx .official_box {margin:25px 0 0 0;} .hanji_intro .map_poly:after {padding-top:56%;} .hanji_intro .main_poster {width:220px; padding:0 28px 0 0;} .hanji_intro .main_vod {width:calc(100% - 220px);} } @media screen and (max-width: 650px){ .hanji_intro .intbx .pic {width:100%; padding:0 10px;;} .hanji_intro {padding:0px 0 30px 0;} .hanji_intro .intbx .ment {line-height:170%; font-size:12px; padding:0 20px;} .hanji_intro .intbx .ment point {font-size:15px; padding:0px 0 10px 0;} .hanji_intro .intbx .ment cp {font-size:13px; padding:10px 0 0px 0;} .hanji_intro .intbx .ment cp name {font-size:15px;} .hanji_intro .intbx .map_area {padding:30px 10px 0 10px;;} .hanji_intro .intbx .poster {margin-top:20px;} .hanji_intro .intbx .official_box {margin:20px 0 0 0;} .hanji_intro .where {margin:auto; padding:20px 0 0 0; border-top:0;} .hanji_intro .where .whead { padding: 0 0px 10px 20px;} .hanji_intro .where .whead h3 {font-size:17px;} .hanji_intro .where .whead p {font-size:12px; padding:3px 0 0 0;} .hanji_intro .main_poster {width:100%; padding:0px 10px 10px 10px; text-align:center;} .hanji_intro .main_poster img {max-width:550px; width:100%; border-radius:10px;} .hanji_intro .main_vod {width:calc(100% - 20px); margin-left:10px;} .hanji_intro ul.addr_info {padding:10px 20px 0 20px;} .hanji_intro ul.addr_info li {font-size:12px; } .hanji_intro ul.addr_info li.wrn {font-size:11px; padding:0 0 0 0px;} } /**/ ul.program_detail {position:relative; left:0; right:0; margin:auto; max-width:1300px;} ul.program_detail.only_one {max-width:900px;} ul.program_detail > li {display:inline-block; vertical-align:top; width:100%; text-align:left; position:relative; font-size:0; padding:0 20px; /*border-top:1px dashed #ddd;*/ border:10px solid red;} ul.program_detail > li.pick_con {} ul.program_detail.only_one > li {width:100%;} ul.program_detail > li:first-child {margin:0; } ul.program_detail > li:last-child {margin-bottom:30px;} ul.program_detail > li .pd_wrap {position:relative; left:0; right:0; margin:auto; max-width:1000px; padding:70px; border-top:1px dashed #ddd;/*border-radius:30px; background:#fafafa;*/} ul.program_detail > li:first-child .pd_wrap {border:0;} ul.program_detail > li:nth-child(2) .pd_wrap {border:0;} ul.program_detail > li .with_map, ul.program_detail > li .pic, ul.program_detail > li .con {position:relative; left:0; right:0; margin:auto; } ul.program_detail > li .with_map {width:100%; border-radius: 10px; overflow: hidden;} ul.program_detail > li .with_map:after {content:""; display:block; padding-top:60%;} ul.program_detail > li .with_map .kakao_api {position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; } ul.program_detail > li .pic {width:100%; background-size:cover !important; background-position:center center !important; margin-top:25px;} ul.program_detail > li .pic:after {content:""; display:block; padding-top:60%; display:none;} ul.program_detail > li .pic img {max-width:100%; width:auto; border-radius:10px;} ul.program_detail > li .pic .kakao_api {position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; } ul.program_detail > li .pic .thum_bg {position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:100%; background:orangered; background-size:cover !important; background-position:center center !important; z-index:3; transition:all .3s; cursor:pointer;} ul.program_detail > li .pic .thum_bg:hover {background:red;} ul.program_detail > li .pic .thum_bg:after {content:"사진"; position:absolute; bottom:-30px; left:50%; transform:translateX(-50%); border-radius:35px; background:rgba(0,0,0,0.8); font-size:12px; color:#fff; white-space:nowrap; line-height:100%; padding:5px 10px; display:none;} ul.program_detail > li .pic .thum_bg i {position:absolute; top:calc(50% - 2px); left:50%; transform:translate(-50%, -50%); font-size:17px; color:#fff;} ul.program_detail > li .pic .thum_view {position:absolute; top:0; left:0; width:100%; height:100%; transform:translateX(100%); background-size:cover !important; background-position:center center !important; z-index:5; transition:all .3s;} ul.program_detail > li .pic .thum_view.show {transform:translateX(0%);} ul.program_detail > li .pic .thum_view i {position:absolute; top:15px; right:15px; font-size:20px; color:#fff; cursor:pointer;} ul.program_detail > li .con {width:100%; padding:0 0 0 0px;} ul.program_detail > li cate_box {position:absolute; top:0; right:0; font-family:var(--neo); font-weight:600; color:#000; font-size:12px; line-height:120%; letter-spacing:0em; border-bottom:1px dashed #ddd; line-height:110%; padding:3px; } ul.program_detail > li cate_box:before {content: "";} ul.program_detail > li cate_box.cnm1:before {content: "개막"} ul.program_detail > li cate_box.cnm2:before {content: "주제전시"} ul.program_detail > li cate_box.cnm3:before {content: "작가참여전시"} ul.program_detail > li cate_box.cnm4:before {content: "시민참여전시"} ul.program_detail > li cate_box.cnm5:before {content: "기획전시(실내)"} ul.program_detail > li cate_box.cnm6:before {content: "대한민국한지대전"} ul.program_detail > li cate_box.cnm7:before {content: "한지한마당"} ul.program_detail > li cate_box.cnm8:before {content: "국제포럼"} ul.program_detail > li cate_box.cnm9:before {content: "마켓"} ul.program_detail > li cate_box.cnm10:before {content: "버스킹"} ul.program_detail > li cate_box.cnm11:before {content: "이벤트"} ul.program_detail > li h3 {position:relative; font-family:var(--neo); font-weight:800; color:#000; font-size:27px; line-height:120%; letter-spacing:0em; transition:all .3s;} ul.program_detail > li.pick_con h3 {animation: pick_con_title 1.5s infinite; color:#000; } ul.program_detail > li h4 {position:relative; font-family:var(--neo); font-weight:600; color:#396483; font-size:18px; line-height:120%; letter-spacing:-0.05em; padding:7px 0 0 0;} ul.program_detail > li p, ul.program_detail > li .spc {position:relative; font-family:var(--neo); font-weight:700; color:#777; font-size:13px; line-height:170%; padding:20 0 0 16px; display:inline-block; width:100%; border:0px solid red;} ul.program_detail > li .spc {color:#a94040;} ul.program_detail > li .view_vod {position:relative; top:0px; left:0; width:calc(100% + 16px); margin-left:-16px; padding-bottom:56.25%; padding-left:0; border-radius:10px; overflow:hidden;} ul.program_detail > li .view_vod iframe {position:absolute; width:100% !important; height:100% !important; left:0; } ul.program_detail > li ul.info {position:relative; margin:20px 0 0 0;} ul.program_detail > li ul.info li {position:relative; font-size:0px; margin-top:5px;} ul.program_detail > li ul.info li:first-child {margin-top:0px;} ul.program_detail > li ul.info li span {display:inline-block; vertical-align:top;} ul.program_detail > li ul.info li .tt {width:40px; font-family:var(--neo); font-weight:600; color:#555; font-size:12px; line-height:120%; text-align:center; padding:2px 0 0 13px;} ul.program_detail > li ul.info li .tt:before {content:""; position:absolute; top:6px; left:3px; background:#999; width:5px; height:5px; border-radius:100%;} ul.program_detail > li ul.info li .txt {width:calc(100% - 40px); font-family:var(--neo); font-weight:700; color:#333; font-size:13px; line-height:120%; padding:0px 0 0px 9px;letter-spacing:-0.05em;} ul.program_detail > li ul.info li .txt em {display:inline-block; vertical-align:middle; line-height:100%; font-size:10px; font-style:normal; margin-left:3px; background:orange; color:#fff; border-radius:3px; width:17px; height:17px; line-height:17px; text-align:center; font-weight:500;} ul.program_detail > li .go_gallery {display:inline-block; width:100%;} ul.program_detail > li .go_gallery a {display:inline-block; font-size:0;text-align:center;border-radius:35px; padding:13px 20px;transition:all .3s;background:#fb8d00;} ul.program_detail > li .go_gallery a:hover {background:orangered; } ul.program_detail > li .go_gallery a i, ul.program_detail > li .go_gallery a span {display:inline-block; vertical-align:middle; color:#fff; line-height:100%; } ul.program_detail > li .go_gallery a i {font-size:15px; padding-right:7px;} ul.program_detail > li .go_gallery a {font-size:13px; font-family:var(--neo); font-weight:800; transition:all .3s; letter-spacing:-0.05em;} ul.program_detail > li.list_none {font-size:12px; padding:80px 0; text-align:center;font-family:var(--neo); font-weight:700; color:#ddd;} .place_here {background:#333; font-size:12px; color:#fff; border-radius:35px; position:relative; top:-5px; line-height:100%; padding:5px 10px;} .place_here:after {content:""; position:absolute; bottom:-5px; left:50%; transform:translateX(-50%); border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid #333;} .place_here:before {content:""; position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); width:7px; border-bottom:1px solid #333;box-shadow: 10px 10px 5px red;} @media screen and (max-width: 1200px){ ul.program_detail > li { width:100%; } ul.program_detail > li:nth-child(2) .pd_wrap {border-top:1px dashed #ddd;} } @media screen and (max-width: 900px){ ul.program_detail > li .pd_wrap {padding:0 0; border:0;} ul.program_detail > li .pic {width:100%;} ul.program_detail > li .con {width:100%; padding:25px 10px 0 10px;} } @media screen and (max-width: 650px){ ul.program_detail > li {margin-top:10px;} ul.program_detail > li .pd_wrap, ul.program_detail > li:nth-child(2) .pd_wrap {border:0;} ul.program_detail > li .con {padding:20px 10px 0 10px;} ul.program_detail > li cate_box {top:20px; right:0; } ul.program_detail > li h3 {font-size:17px;} ul.program_detail > li h4 {font-size:13px; padding:5px 0 0 0;} ul.program_detail > li ul.info {margin:10px 0 0 0;} ul.program_detail > li ul.info li {margin-top:3px;} ul.program_detail > li ul.info li span {} ul.program_detail > li ul.info li .tt {font-size:11px; padding:0px 0 0 0;} ul.program_detail > li ul.info li .tt:before {top:4px; width:3px; height:3px;} ul.program_detail > li ul.info li .txt {font-size:11px; padding-left:0;} ul.program_detail > li ul.info li .txt em {font-size:8px; margin-left:2px; padding:0px; width:12px; height:12px; line-height:12px; text-align:center; font-weight:500;} ul.program_detail > li p, ul.program_detail > li .spc {font-size:12px; line-height:160%; padding-left:3px; } ul.program_detail > li .spc {padding:10 0 0 16px;} ul.program_detail > li .go_gallery a {padding:10px 18px;} ul.program_detail > li .go_gallery a i {font-size:14px; padding-right:7px;} ul.program_detail > li .go_gallery a {font-size:13px;} } /**/ .dp_nav_wrap {position:sticky; top:190px; max-width:1250px; left:0; right:0; margin:auto; padding:20px 0 0 0;background:#fff; z-index:10;} nav.dp_nav {position:relative; font-size:0; display:flex; } nav.dp_nav > li {flex:1; position:relative; margin:0 3px;} nav.dp_nav > li:last-child {margin-bottom:0; } nav.dp_nav > li a {display:block; font-weight:600; font-family:var(--neo); font-size:13px; text-align:center; padding:13px 0; color:#333; background:#f5f3f3; border-radius:30px;} nav.dp_nav > li.on a {background:#067883; color:#fff; font-weight:700;} @media screen and (max-width: 1160px){ .dp_nav_wrap {top:90px;} } @media screen and (max-width: 900px){ nav.dp_nav {margin:0px auto 20px auto; display:block;} nav.dp_nav > li {display:inline-block; vertical-align:top; width:calc(25% - 6px);margin:3px;} } @media screen and (max-width: 650px){ .dp_nav_wrap {top:50px; padding:0;} nav.dp_nav {left:0; right:0; margin:0px auto 10px auto; max-width:calc(100% - 18px); } nav.dp_nav > li {width:calc(25% - 2px);margin:1px;} nav.dp_nav > li a {font-size:12px; padding:10px 0; border-radius:5px;} } /**/ .my_place_wrap {position:relative; max-width:1200px; left:0; right:0; margin:0 auto 80px auto; font-size:0; text-align:right; text-align:right;} .my_place_wrap .marker_box {position:sticky; top:105px; left:0; width:470px; height:600px; margin-right:30px; display:inline-block; vertical-align:top; border-radius:15px; overflow:hidden; z-index:1;} .my_place_wrap .kakao_map {position:absolute; top:0; left:0; width:100%; height:100%;} .my_place_wrap .all_view {position:absolute; bottom:15px; right:15px; z-index:2; font-size:11px; background:red; color:#fff; font-weight:600; padding:6px 9px; line-height:100%; border-radius:30px; cursor:pointer;} .rp_wrp {position:relative;} .rp_wrp ul.loc_rname {position:relative;font-size:0; text-align:left; padding:0 10px;} .rp_wrp ul.loc_rname li {display:inline-block;vertical-align:middle; padding:5px; font-size:15px; font-weight:600; color:#000;position:relative; } .rp_wrp ul.loc_rname li span {width:20px; line-height:20px; text-align:center; display:inline-block;vertical-align:middle; background:#eb6567; color:#fff; border-radius:100%; font-size:12px;} .rp_wrp ul.loc_rname.rst li span {background:#538fcc;} .rp_wrp .rmap {position:relative; padding:25px 0 20px 0;} .rp_wrp .rmap img {width:100%; border-radius:10px;} ul.map_kind {position:absolute; top:10px;left:10px; z-index:2; font-size:0; } ul.map_kind li {display:inline-block; vertical-align:middle; margin-right:3px; background:#555; color:#eee; font-weight:500; padding:6px 9px; line-height:100%; border-radius:30px; font-size:11px; cursor:pointer;} ul.map_kind li.on {background:#0081ef; color:#fff;} ul.map_kind li:last-child {margin:0;} ul.event_wrap {display:inline-block; vertical-align:top; position:relative; width:calc(100% - 500px); text-align:left;overflow:hidden; } ul.event_wrap > li {display:inline-block; vertical-align:top; width:calc(50% - 10px); position:relative; margin:20px 5px 0 5px; padding:20px 10px 0 10px; line-height:120%; border-top:0px dashed #ddd;} ul.event_wrap > li.empty {display:none;} ul.event_wrap > li.title {margin-top:0px; padding:0px 10px 0 10px; border:0; font-size:17px; font-weight:800; color:#000; display:inline-block !important; width:100% !important;} ul.event_wrap > li.title p {display:inline-block; width:100%; padding:3px 0px 0 1px; font-size:11px; font-weight:500; color:#555;} ul.event_wrap > li h2 {display:inline-block; vertical-align:middle; position:relative; cursor:pointer; font-size:17px; font-weight:800; color:#000; margin-bottom:20px; line-height:120%; padding-left:25px; } ul.event_wrap > li h2:before {content:""; position:absolute; top:50%; left:0; transform:translateY(-50%); width:5px; height:5px; background:#ddd; border-radius:100%; display:none;} ul.event_wrap > li h2 i {position:absolute; top:50%; left:0px; transform:translateY(-50%); font-size:22px; color:#000;cursor:pointer;} ul.event_wrap > li.cnm1 h2:before {background: var(--map_mk_color1);} ul.event_wrap > li.cnm2 h2:before {background: var(--map_mk_color2);} ul.event_wrap > li.cnm3 h2:before {background: var(--map_mk_color3);} ul.event_wrap > li.cnm4 h2:before {background: var(--map_mk_color4);} ul.event_wrap > li.cnm5 h2:before {background: var(--map_mk_color5);} ul.event_wrap > li.cnm6 h2:before {background: var(--map_mk_color6);} ul.event_wrap > li.cnm7 h2:before {background: var(--map_mk_color7);} ul.event_wrap > li.cnm8 h2:before {background: var(--map_mk_color8);} ul.event_wrap > li.cnm9 h2:before {background: var(--map_mk_color9);} ul.event_wrap > li.cnm10 h2:before {background: var(--map_mk_color10);} ul.event_wrap > li.cnm11 h2:before {background: var(--map_mk_color11);} ul.event_wrap > li.cnm1 h2 i {color: var(--map_mk_color1);} ul.event_wrap > li.cnm2 h2 i {color: var(--map_mk_color2);} ul.event_wrap > li.cnm3 h2 i {color: var(--map_mk_color3);} ul.event_wrap > li.cnm4 h2 i {color: var(--map_mk_color4);} ul.event_wrap > li.cnm5 h2 i {color: var(--map_mk_color5);} ul.event_wrap > li.cnm6 h2 i {color: var(--map_mk_color6);} ul.event_wrap > li.cnm7 h2 i {color: var(--map_mk_color7);} ul.event_wrap > li.cnm8 h2 i {color: var(--map_mk_color8);} ul.event_wrap > li.cnm9 h2 i {color: var(--map_mk_color9);} ul.event_wrap > li.cnm10 h2 i {color: var(--map_mk_color10);} ul.event_wrap > li.cnm11 h2 i {color: var(--map_mk_color11);} ul.event_wrap > li program {position:absolute; top:15px; right:15px; display:inline-block; } ul.event_wrap > li program a {display:block; line-height:100%; border:1px solid #bce0ff; color:#0081ef; position:relative; font-size:11px; font-weight:600; padding:6px 12px; border-radius:30px; background:#fff;} .map_title {position:absolute; top:-58px; left:50%; transform:translateX(-50%); background:#333; transition:all .3s; padding:5px 10px; border-radius:35px; border:1px solid #eee;} .map_title h4 {font-size:12px; position:relative; font-family:var(--bar); font-weight:normal; color:#fff; transition:all .3s; letter-spacing:0em; line-height:100%;} .map_title p {display:none;} .map_title.on {background:orangered; border-color:orangered;} .map_title.on h4 {color:#fff;} ul.my_place_set_list {position:relative; padding-left:0;} ul.my_place_set_list li {position:relative; font-size:0; line-height:110%; margin-top:10px;cursor:pointer;} ul.my_place_set_list li:first-child {margin:0;} ul.my_place_set_list li.none {display:none;} ul.my_place_set_list li .pic, ul.my_place_set_list li .info {display:inline-block; vertical-align:top; position:relative;} ul.my_place_set_list li .pic {width:35px; border-radius:100%; overflow:hidden;background-size:50% 50% !important; background-position:center center !important; background:#ddd url("/images/sym.png") no-repeat;} ul.my_place_set_list li .pic:after {content:""; display:block; padding-top:100%;} ul.my_place_set_list li .pic .data {position:absolute; top:0; left:0; width:100%; height:100%; background-size:cover !important; background-position:center center !important;} ul.my_place_set_list li .info {width:calc(100% - 35px); padding:3px 0 0 10px;} ul.my_place_set_list li h3 {position:relative; font-size:13px; line-height:110%; color:#000; font-weight:600; transition:all .3s; } ul.my_place_set_list li:hover h3 {color:red;} ul.my_place_set_list li p {position:relative; font-size:10px; line-height:110%; margin-top:3px;} ul.my_place_set_list li p time_set {display:inline-block; width:100%; font-size:10px; color:orange; line-height:110%; margin-top:3px;} ul.my_place_set_list li p place {display:inline-block; width:100%; font-size:10px; color:#40989d; line-height:110%; margin-top:1px;} @media screen and (max-width: 1160px){ .my_place_wrap {overflow:initial; border-radius:0; margin-bottom:50px;} .my_place_wrap .marker_box {position:sticky; z-index:1; width:100%; height:500px; top:90px;} .my_place_wrap .all_view {top:initial; bottom:15px; right:15px;} ul.event_wrap {width:100%; margin:50px 0 0 0;} ul.event_wrap > li {width:50%; border:0; margin:0; padding:15px;} } @media screen and (max-width: 650px){ .my_place_wrap {background:transparent; margin:0;} .my_place_wrap .marker_box {height:300px; top:55px; margin:0; border-radius:0;} ul.event_wrap {padding:0px; margin-top:20px;} ul.event_wrap > li{width:100%;padding:25px;border-bottom:1px dashed #ddd;} ul.event_wrap > li:last-child {border:0;} ul.event_wrap > li.title {display:none !important;} ul.event_wrap > li h2 {font-size:15px; } ul.event_wrap > li h2 i {right:0;} } /**/ .kakao_map_wrp {position: absolute; text-align: left; padding:10px 10px 10px 10px; border-radius:5px;2px; background:var(--kkm-bg-border); transition:all .3s;} .kakao_map_wrp.point1 {background:#0082d1;} .kakao_map_wrp.point2 {background:orangered;} .kakao_map_wrp.point2:hover {background:red;} .kakao_map_wrp:hover {background:var(--kkm-bg-border-hover); z-index:1000;} .kakao_map_wrp:before, .kakao_map_wrp:after {content:""; position: absolute;} .kakao_map_wrp * {padding: 0;margin: 0;} .kakao_map_wrp h3 {position:relative; top:0; left:0; padding:0; line-height:110%; font-family:var(--neo); font-weight:800; font-size:13px; color:#fff;} .kakao_map_wrp h3 span {display:inline-block; padding:5px 0 0 0px; font-family:var(--bar);line-height:110%; font-weight:normal; font-size:12px; color:#eee;} .kakao_map_wrp i {position: absolute;top: 4px;right: 4px; color: #fff; font-size:11px; transition:all .2s;cursor: pointer; display:none;} .kakao_map_wrp.default {left: 50%;bottom: 20px; transform:translateX(-50%);} .kakao_map_wrp.default:before, .kakao_map_wrp.default:after {left: 50%; transform:translateX(-50%); } .kakao_map_wrp.default:before {bottom:-20px; width:1px; height:20px; background: var(--kkm-bg-border);} .kakao_map_wrp.default:after {bottom:-20px;width:var(--kkm-here-wd-ht); height:var(--kkm-here-wd-ht); background:var(--kkm-here); border-radius:100%;} .kakao_map_wrp.spc1 {left: calc(50% + 50px);bottom: 55px; transform:translateX(-50%);} .kakao_map_wrp.spc1:before, .kakao_map_wrp.spc1:after {left: calc(50% - 50px); transform:translateX(-50%); } .kakao_map_wrp.spc1:before {bottom:-55px; width:1px; height:55px; background: var(--kkm-bg-border);} .kakao_map_wrp.spc1:after {bottom:-55px;width:var(--kkm-here-wd-ht); height:var(--kkm-here-wd-ht); background:var(--kkm-here); border-radius:100%;} .kakao_map_wrp.place1 {left: 50%;top: 20px; transform:translateX(-50%);} .kakao_map_wrp.place1:before, .kakao_map_wrp.place1:after {left: 50%; transform:translateX(-50%); } .kakao_map_wrp.place1:before {top:-20px; width:1px; height:20px; background: var(--kkm-bg-border);} .kakao_map_wrp.place1:after {top:-20px;width:var(--kkm-here-wd-ht); height:var(--kkm-here-wd-ht); background:var(--kkm-here); border-radius:100%;} .kakao_map_wrp.place2 {left: 20px;top: 50%; transform:translateY(-50%);} .kakao_map_wrp.place2:before, .kakao_map_wrp.place2:after {top: 50%; transform:translateY(-50%); } .kakao_map_wrp.place2:before {left:-20px; width:20px; height:1px; background:var(--kkm-bg-border);} .kakao_map_wrp.place2:after {left:-20px;width:var(--kkm-here-wd-ht); height:var(--kkm-here-wd-ht); background:var(--kkm-here); border-radius:100%;} .kakao_map_wrp.place3 {left: 20px;top:calc(50% - 20px); transform:translateY(-50%);} .kakao_map_wrp.place3:before, .kakao_map_wrp.place3:after {top: 50%; transform:translateY(-50%); } .kakao_map_wrp.place3:before {left:-20px; width:20px; height:1px; background: var(--kkm-bg-border);} .kakao_map_wrp.place3:after {left:-20px;width:var(--kkm-here-wd-ht); height:var(--kkm-here-wd-ht); background:var(--kkm-here); border-radius:100%;} .kakao_map_wrp.place4 {right: 20px;top: 50%; transform:translateY(-50%); } .kakao_map_wrp.place4:before, .kakao_map_wrp.place4:after {top: 50%; transform:translateY(-50%); } .kakao_map_wrp.place4:before {right:-20px; width:20px; height:1px; background:var(--kkm-bg-border);} .kakao_map_wrp.place4:after {right:-20px;width:var(--kkm-here-wd-ht); height:var(--kkm-here-wd-ht); background:var(--kkm-here); border-radius:100%;} /**/ .intro_bx {position:relative; font-size:0; padding:0 2px;} .intro_bx .poster, .intro_bx .youtube, .intro_bx .mv_txt, .intro_bx .ib_hdbx {display:inline-block; vertical-align:top; position:relative; } .intro_bx .youtube {width:50%; border-radius:10px; overflow:hidden;} .intro_bx .youtube:after {content:""; display:block; padding-top:56.25%;} .intro_bx .youtube iframe {position:absolute; top:0; left:0; width:100% !important; height:100% !important;} .intro_bx .poster {width:280px; } .intro_bx .poster img {width:100%;border-radius:10px; } .intro_bx .mv_txt {width:calc(100% - 280px); font-family:var(--neo); font-weight:700; font-size:16px; line-height:190%; padding:0 0 0 50px; color:#555;} .intro_bx .mv_txt point {display:inline-block; width:100%; font-weight:800; font-size:20px; line-height:160%; padding:0 0 10px 0px; color:#000;} .intro_bx .mv_txt time {display:inline-block; width:100%; font-weight:800; font-size:11px; line-height:160%; padding:15px 0 3px 0px; color:orange;} .intro_bx .mv_txt cap {display:inline-block; width:100%; font-weight:800; font-size:18px; line-height:160%; padding:30px 0 0px 0px; color:#000;} .intro_bx .ib_hdbx {width:100%; padding:45px 0 15px 5px;} .intro_bx .ib_hdbx h4, .intro_bx .ib_hdbx p {position:relative;font-family:var(--neo);} .intro_bx .ib_hdbx h4 { font-weight:800; font-size:25px; line-height:120%; color:#000;} .intro_bx .ib_hdbx p {font-weight:700; font-size:14px; line-height:120%; color:#555; padding:5px 0 0 0;} @media screen and (max-width: 1160px){ .intro_bx .youtube {width:100%;} .intro_bx .poster {width:100%; text-align:center;} .intro_bx .poster img {max-width:600px; } .intro_bx .mv_txt {width:100%; padding:30px 30px 0 30px; } .intro_bx .ib_hdbx {width:100%; padding:35px 0 15px 5px; margin-top:35px;border-top:1px solid #eee;} .intro_bx .ib_hdbx h4 { font-size:22px;} .intro_bx .ib_hdbx p {font-size:13px;} } @media screen and (max-width: 650px){ .intro_bx {padding:0 15px;} .intro_bx .mv_txt {padding:20px 10px 0 10px; font-size:13px; line-height:140%; } .intro_bx .mv_txt .hd {display:none;} .intro_bx .mv_txt point {font-size:16px;} .intro_bx .mv_txt time {font-size:10px; padding:12px 0 3px 0px;} .intro_bx .mv_txt cap {font-size:14px; padding:20px 0 0px 0px;} .intro_bx .ib_hdbx {padding:20px 0 10px 5px; margin-top:20px;} .intro_bx .ib_hdbx h4 { font-size:18px;} .intro_bx .ib_hdbx p {font-size:12px;} } /**/ ul.film {position:relative; font-size:0;} ul.film li {display:inline-block; vertical-align:middle; width:calc(12.5% - 4px); position:relative; background-size:cover !important;; background-position:center center !important; background:rgba(0,0,0,0.9); margin:2px; border-radius:10px; overflow:hidden; cursor:pointer;} ul.film li:first-child {display:none;} ul.film li:after {content:""; display:block; padding-top:140%;} ul.film li:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#000; z-index:1; opacity:0; transition:all .3s;} ul.film li:hover:before {opacity:0.5;} ul.film li .fs_no {position:absolute; top:calc(50% + 10px); left:0; width:100%; transform:translateY(-50%); font-size:15px; text-align:center; z-index:2; opacity:0; transition:all .3s;} ul.film li .fs_no span {display:inline-block; width:100%; line-height:100%;font-family:var(--neo); color:#fff;} ul.film li .fs_no span.fn {font-weight:900; font-size:20px;} ul.film li .fs_no span.fs {font-weight:800; font-size:12px; padding-top:5px;} ul.film li:hover .fs_no {top:50%; opacity:1;} @media screen and (max-width: 2000px){ ul.film li {width:calc(14.1857% - 4px)} } @media screen and (max-width: 1160px){ ul.film li {width:calc(20% - 4px)} } @media screen and (max-width: 900px){ ul.film li {width:calc(25% - 4px)} } @media screen and (max-width: 650px){ ul.film li {width:calc(25% - 4px)} } /**/ ul.festival_support {position:relative; font-size:0; } ul.festival_support li {display:inline-block; vertical-align:top; width:calc(20% - 10px); margin:5px; background-position: center center !important; background-size:80% auto !important; position:relative; border-radius:7px; border:1px solid #eee;} ul.festival_support li.no_link {background:#fafafa;} ul.festival_support li i {position:absolute; top:10px; right:10px; font-size:15px; color:#999; transition:all .2s;} ul.festival_support li:hover i {color:red;} ul.festival_support li a {position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;} ul.festival_support li span {position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%); font-size:13px; text-align:center; padding:0 10px; font-family:var(--neo); font-weight:600; color:#333; line-height:130%;} ul.festival_support li:after {content:""; display:block; padding-top:40%;} @media screen and (max-width: 1160px){ ul.festival_support li {width:calc(16.6666% - 6px); margin:3px;} ul.festival_support li span {font-size:12px; } } @media screen and (max-width: 800px){ ul.festival_support li {width:calc(25% - 6px);} ul.festival_support li span {font-size:11px; } } @media screen and (max-width: 650px){ ul.festival_support li {width:calc(33.3333% - 6px);} ul.festival_support li span {font-size:11px; } } /**/ .schedule_box_wrap {position:relative; max-width:1200px; left:0; right:0; margin:auto; padding:0 10px 70px 10px;} .schedule_box_wrap .day_info {position:relative; font-size:0;} .schedule_box_wrap .day_info .group {display:inline-block; vertical-align:top; width:calc(20% - 16px); margin:0 8px; } .schedule_box_wrap .day_info .group.on {display:inline-block;} .schedule_box_wrap .day_info .group h2 {font-size:14px; font-weight:600; color:#000; line-height:1; padding:0 0 15px 5px; position:relative;} .schedule_box_wrap .day_info .group.on h2 {color:red;} .schedule_box_wrap .day_info .group h2 span {position:absolute; top:3px; right:5px; font-size:11px; font-weight:500; color:#000; line-height:1;} .schedule_box_wrap ul.day_tab {display:none; margin-bottom:35px;} .schedule_box_wrap ul.day_tab li {flex:1; margin-right:5px; font-size:13px; border:1px dashed #999; line-height:1; color:#000; background:#fff; padding:12px 0; text-align:center; border-radius:30px;} .schedule_box_wrap ul.day_tab li:last-child {margin:0;} .schedule_box_wrap ul.day_tab li span {display:inline-block; line-height:1; padding-left:3px; font-size:12px; display:none;} .schedule_box_wrap ul.day_tab li.on {background:#bd0044; border:1px solid #bd0044; color:#fff;} @media screen and (max-width: 1160px){ .schedule_box_wrap .day_info .group {display:none;width:100%; margin:0; } .schedule_box_wrap .day_info .group h2 {display:none;} .schedule_box_wrap ul.day_tab {display:flex; } } @media screen and (max-width: 650px){ .schedule_box_wrap {padding:0 10px 10px 10px;} .schedule_box_wrap ul.day_tab {margin-bottom:10px;} .schedule_box_wrap ul.day_tab li {margin-right:3px; font-size:12px; padding:8px 0;} } /**/ ul.festival_time_line {position:relative; padding:0; font-size:0;border:1px solid #c9c9c9; border-radius:7px; overflow:hidden;} ul.festival_time_line.hidden {display:none;} .on ul.festival_time_line {border-color:#999;} ul.festival_time_line > li {position:relative; font-size:0; line-height:110%; width:100%; padding:20px; vertical-align:top; border-top: 1px dashed #c9c9c9;} ul.festival_time_line > li:first-child {border:0;} ul.festival_time_line > li.show {display:inline-block;} ul.festival_time_line > li.none {display:none;} ul.festival_time_line > li.bul {padding:0; background:transparent; height:8px;} ul.festival_time_line > li a {position:absolute; top:0; left:0; width:100%; height:100%; border:0px solid red; z-index:2;} ul.festival_time_line > li cnm {position:relative; font-size:10px; line-height:110%; color:#999; font-weight:500; display:inline-block; margin-bottom:3px;} ul.festival_time_line > li cnm:before {content: "";} ul.festival_time_line > li cnm.cnm1:before {content: "개막"; color: var(--map_mk_color1);} ul.festival_time_line > li cnm.cnm2:before {content: "전시"; color: var(--map_mk_color2);} ul.festival_time_line > li cnm.cnm3:before {content: "공공미술 프로젝트"; color: var(--map_mk_color2);} ul.festival_time_line > li cnm.cnm4:before {content: "체험"; color: var(--map_mk_color2);} ul.festival_time_line > li cnm.cnm5:before {content: "마켓"; color: var(--map_mk_color2);} ul.festival_time_line > li cnm.cnm6:before {content: "이벤트"; color: var(--map_mk_color2);} ul.festival_time_line > li cnm.cnm7:before {content: "공연"; color: var(--map_mk_color7);} /* ul.festival_time_line > li cnm.cnm8:before {content: "국제포럼"; color: var(--map_mk_color8);} ul.festival_time_line > li cnm.cnm9:before {content: "마켓"; color: var(--map_mk_color9);} ul.festival_time_line > li cnm.cnm10:before {content: "버스킹"; color: var(--map_mk_color10);} ul.festival_time_line > li cnm.cnm11:before {content: "이벤트"; color: var(--map_mk_color11);} */ ul.festival_time_line > li:after {content: ""; position:absolute; top:0; left:0; width:100%; height:100%; opacity:0.08; transition:all .3s;} ul.festival_time_line > li:hover:after {opacity:0.18;} ul.festival_time_line > li.cnm1:after {background:var(--map_mk_color1);} ul.festival_time_line > li.cnm2:after {background:var(--map_mk_color2);} ul.festival_time_line > li.cnm3:after {background:var(--map_mk_color3);} ul.festival_time_line > li.cnm4:after {background:var(--map_mk_color4);} ul.festival_time_line > li.cnm5:after {background:var(--map_mk_color5);} ul.festival_time_line > li.cnm6:after {background:var(--map_mk_color6);} ul.festival_time_line > li.cnm7:after {background:var(--map_mk_color7);} ul.festival_time_line > li .sr_pic, ul.festival_time_line > li .sr_info {display:inline-block; vertical-align:top; position:relative; z-index:1;} ul.festival_time_line > li .sr_pic {width:60px; background-size:cover !important; background-position:center center !important; border-radius:100%; overflow:hidden; display:none;} ul.festival_time_line > li .sr_pic:after {content:""; display:block; padding-top:100%;} ul.festival_time_line > li .sr_info {width:calc(100% - 0px); padding:0 0 0 0px;} ul.festival_time_line > li .sr_info .sh {padding-bottom:5px;} ul.festival_time_line > li h3 {position:relative; font-size:13px; line-height:110%; color:#000; font-weight:600;} ul.dti_info {position:relative; padding:0; font-size:0;} ul.dti_info li {position:relative; font-size:0; line-height:110%; width:100%; padding:5px 0 0 0; vertical-align:top; } ul.dti_info li span {display:inline-block; vertical-align:top; font-size:11px; line-height:1;} ul.dti_info li .tit {width:40px; font-weight:500;} ul.dti_info li .tit:before {content:"ㆍ";} ul.dti_info li .txt {width:calc(100% - 40px); font-weight:600; color:#000;} @media screen and (max-width: 1160px){ .on ul.festival_time_line {border-color:#c9c9c9;} } /**/ .pd_libx {position:relative; left:0; right:0; margin:auto; max-width:1200px; font-size:0;} .pd_libx .pd_box {position:sticky; top:330px; left:0; display:inline-block; vertical-align:top; border:1px solid #eee; margin:60px 0 0 0;padding:25px; background:#fafafa;width:200px; z-index:1; border-radius:15px;} .pd_libx .title {font-size:15px; font-weight:900; padding:5px 0 15px 0;; cursor:default; color:#000; transition:all .0s; } .pd_libx ul.pd_tab {position:relative; font-size:0;} .pd_libx ul.pd_tab li {display:inline-block; vertical-align:top; width:100%;font-size:12px; line-height:100%; font-weight:600; padding:5px 0; cursor:pointer; color:#555; transition:all .3s;} .pd_libx ul.pd_tab li:hover {color:#000;} .pd_libx ul.pd_tab li.on {font-weight: bold;color: red; font-weight:800;} .pd_libx ul.pd_tab li:before {content:"ㆍ"; font-weight:500; color:#999;} .pd_libx ul.pd_tab li.on:before {color:red;} .pd_libx ul.pd_f_info {position:relative; display:inline-block; vertical-align:top; width:calc(100% - 200px); font-size:0;} .pd_libx ul.pd_f_info > li {display: none;font-size:15px; vertical-align:top;} .pd_libx ul.pd_f_info > li .prw_wrap {position:relative; padding:0 85px 80px 85px; margin-top:-50px;} .pd_libx ul.pd_f_info > li .prw_wrap > h3 {position:relative; font-weight:600; color:#000; font-size:17px; padding:0 0 10px 10px;} .pd_libx ul.pd_f_info > li .prz_bx {position:relative;} @media screen and (max-width: 1160px){ .pd_libx .pd_box {position:relative; top:0; margin:0;padding:30px 20px 20px 20px; background:transparent;width:100%; border-radius:0px; border:0;} .pd_libx .title {padding:5px 0 10px 5px; display:none;} .pd_libx ul.pd_tab li {width:auto;font-size:12px; line-height:100%; font-weight:600; padding:6px 15px; border-radius:30px; background:#f4f4f4; cursor:pointer; color:#777; transition:all .3s; border:0px solid #e9e9e9; margin:2px;} .pd_libx ul.pd_tab li.on {background:red; color:#fff;} .pd_libx ul.pd_tab li.on:before {color:#fff;} .pd_libx ul.pd_tab li:before {display:none;} .pd_libx ul.pd_f_info {width:100%;} } @media screen and (max-width: 900px){ .pd_libx ul.pd_f_info > li .prw_wrap {padding:0 5px 30px 5px; margin-top:0px;} .pd_libx ul.pd_f_info > li .prw_wrap > h3 {padding:0 0 10px 20px;} } @media screen and (max-width: 650px){ .pd_libx .pd_box {padding:5px 10px;} .pd_libx ul.pd_tab li {font-size:11px; margin:2px; padding:5px 10px;} .pd_libx ul.pd_f_info > li .prw_wrap > h3 {padding:0 0 10px 15px; font-size:14px; letter-spacing:-0.05em;} .pd_libx ul.pd_f_info > li .prw_wrap {padding:0 10px;} } /**/ .kakao_map_total_pick {position: absolute; bottom:0; left:0px; width: 1px; height: 15px; background:transparent; z-index:9999;pointer-events: none;/*마커의 클릭이벤트 해제*/} .kakao_map_total_pick:after {content:""; position: absolute; bottom:0; left:50%; transform:translateX(-50%); border-top:15px solid var(--map_loc_out); border-left:3px solid transparent; border-right:3px solid transparent;} .kakao_map_total_pick.empty {} .kakao_map_total_pick.show {background:red;} .kakao_map_total_pick h3 {position:absolute; top:0px; left:50%; transform:translate(-50%, -100%); max-width:230px; width:auto;font-size:11px; line-height:110%; padding:5px 10px; border-radius:30px; font-weight:600; color:var(--map_loc_title); background:#fff; z-index:1;text-overflow: ellipsis; white-space: nowrap; overflow:hidden; dis play: none; border:1px solid #eee; } .kakao_map_total_pick.cnm1 h3 {color: var(--map_mk_color1); border-color: var(--map_mk_color1);} .kakao_map_total_pick.cnm2 h3 {color: var(--map_mk_color2); border-color: var(--map_mk_color2);} .kakao_map_total_pick.cnm3 h3 {color: var(--map_mk_color3); border-color: var(--map_mk_color3);} .kakao_map_total_pick.cnm4 h3 {color: var(--map_mk_color4); border-color: var(--map_mk_color4);} .kakao_map_total_pick.cnm5 h3 {color: var(--map_mk_color5); border-color: var(--map_mk_color5);} .kakao_map_total_pick.cnm6 h3 {color: var(--map_mk_color6); border-color: var(--map_mk_color6);} .kakao_map_total_pick.cnm7 h3 {color: var(--map_mk_color7); border-color: var(--map_mk_color7);} .kakao_map_total_pick.cnm8 h3 {color: var(--map_mk_color8); border-color: var(--map_mk_color8);} .kakao_map_total_pick.cnm9 h3 {color: var(--map_mk_color9); border-color: var(--map_mk_color9);} .kakao_map_total_pick.cnm10 h3 {color: var(--map_mk_color10); border-color: var(--map_mk_color10);} .kakao_map_total_pick.cnm11 h3 {color: var(--map_mk_color11); border-color: var(--map_mk_color11);} /* .kakao_map_total_pick.cnm1 h3 {background: var(--map_mk_color1);} .kakao_map_total_pick.cnm2 h3 {background: var(--map_mk_color2);} .kakao_map_total_pick.cnm3 h3 {background: var(--map_mk_color3);} .kakao_map_total_pick.cnm4 h3 {background: var(--map_mk_color4);} .kakao_map_total_pick.cnm5 h3 {background: var(--map_mk_color5);} .kakao_map_total_pick.cnm6 h3 {background: var(--map_mk_color6);} .kakao_map_total_pick.cnm7 h3 {background: var(--map_mk_color7);} .kakao_map_total_pick.cnm8 h3 {background: var(--map_mk_color8);} .kakao_map_total_pick.cnm9 h3 {background: var(--map_mk_color9);} .kakao_map_total_pick.cnm10 h3 {background: var(--map_mk_color10);} .kakao_map_total_pick.cnm11 h3 {background: var(--map_mk_color11);} */ /* .kakao_map_total_pick h3:before {content: "";} .kakao_map_total_pick.cnm1 h3:before {content: "개막ㆍ폐막"} .kakao_map_total_pick.cnm2 h3:before {content: "주제전시"} .kakao_map_total_pick.cnm3 h3:before {content: "작가참여전시"} .kakao_map_total_pick.cnm4 h3:before {content: "시민참여전시"} .kakao_map_total_pick.cnm5 h3:before {content: "기획전시(실내)"} .kakao_map_total_pick.cnm6 h3:before {content: "대한민국한지대전"} .kakao_map_total_pick.cnm7 h3:before {content: "한지한마당"} .kakao_map_total_pick.cnm8 h3:before {content: "국제포럼"} .kakao_map_total_pick.cnm9 h3:before {content: "마켓"} .kakao_map_total_pick.cnm10 h3:before {content: "버스킹"} .kakao_map_total_pick.cnm11 h3:before {content: "이벤트"} */ .kakao_map_total_pick.show h3 {display: block;background:#000;} .kakao_map_total_pick span {position:absolute; bottom:0; left:50%; transform:translate(-50%, 50%); width: 15px; height: 3px; background: var(--map_pin_shadow); border-radius: 100%; z-index:1; } .kakao_map_total_pick.show span {background: #000;} .kakao_map_total_pick i {display: none;} .kakao_map_total_pick.empty h3 {background:#000;} .kakao_map_total_pick.empty span {width: 8px; height: 8px; background: #000;} .kakao_map_total_pick .pic {position:absolute; top:-115px; left:50%; transform:translateX(-50%); width:160px; height:85px; background-size:cover !important; background-position:center center !important; display:none; border-radius:7px; overflow:hidden;} .kakao_map_total_pick.map_no1:after, .kakao_map_total_pick.map_no2:after, .kakao_map_total_pick.map_no3:after {border-top-color: var(--map_loc_out_top3) !important; } .kakao_map_total_pick.map_no1 h3, .kakao_map_total_pick.map_no2 h3, .kakao_map_total_pick.map_no3 h3 {background:var(--map_loc_title_bg_top3) !important; border-color: :var(--map_loc_title_bg_top3) !important; /*color: :var(--map_loc_title_top3) !important;*/} /**/ ul.support_box {position:relative; left:0; right:0; margin:auto; max-width:1150px; padding:0 15px 80px 15px; } ul.support_box > li {position:relative; margin-top:25px;} ul.support_box > li.last-child {margin:0;} ul.support_box > li h2 {position:relative; font-size:18px; font-weight:800; padding:0 5px 10px 5px; color:#000;} @media screen and (max-width: 650px){ ul.support_box > li {margin-top:0px;} ul.support_box > li h2 {font-size:14px;padding:0 5px 10px 5px;} ul.support_box > li.hc {margin-top:15px;} } /**/ .ct_slide_box {position:fixed; top:0; left:0; width:100%; height:100%; z-index:100; visibility: hidden; opacity: 0; background:rgba(0,0,0,0.9); transition:all .5s;} .ct_slide_box.show {opacity: 1; visibility: visible; } .ct_slide_box .cbox_pos {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%; } .ct_slide_box .cbox_pos h4 {position:absolute; top:0; left:0; width:100%; height:100px;} .ct_slide_box .cbox_pos h4 span {position:absolute; top:50%; left:20px;; transform:translateY(-50%); width:100%; line-height:100%; text-align:left; font-size:20px; font-weight:600; color:#fff;} .ct_slide_box .cbox_pos h4 i {position:absolute; top:20px; right:20px; transform:rotate(0); line-height:100%; text-align:center; font-size:30px; padding:15px; color:#fff; cursor:pointer; transition:all .3s;} .ct_slide_box .cbox_pos h4 i:hover {transform:rotate(90deg); } .ct_slide_box .cbox_pos .cbox_wrap {position:absolute; width:100%; height:calc(100% - 100px); left:0; bottom:0; font-size:0; overflow:hidden; } .cbox_con {position:relative; font-size:0; overflow:hidden; } .cbox_con .slick-slider{position: relative; top:0; left:0; width:100%; height:auto; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y;-webkit-tap-highlight-color: transparent; } .cbox_con .slick-list{position: relative; display: block; overflow: hidden; margin: 0; padding: 0 !important; z-index:1;} .cbox_con .slick-list:focus{outline: none; } .cbox_con .slick-list.dragging{cursor: pointer; cursor: hand;} .cbox_con .slick-slider .slick-track, .cbox_con .slick-slider .slick-list{-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} .cbox_con .slick-slider button.slick-arrow {position:absolute; top:50%; transform:translateY(-50%) rotate(45deg); z-index:10; width:50px; height:50px; font-size:0; background:transparent; cursor:pointer; border:2px solid #ddd; opacity:0; transition:all .3s; display:none !important;} .cbox_con .slick-slider:hover button.slick-arrow {opacity:1; transition:all .3s;} .cbox_con .slick-slider button.slick-arrow:hover {border-color:#fff; transition:all .3s;} .cbox_con .slick-slider button.slick-prev {left:50px; border-width:0px 0px 1px 1px;} .cbox_con .slick-slider button.slick-next {right:50px; border-width:1px 1px 0 0;} .cbox_con .slick-track{position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .cbox_con .slick-track:before, .cbox_con .slick-track:after{display: table; content: '';} .cbox_con .slick-track:after{clear: both;} .cbox_con .slick-loading .slick-track{visibility: hidden;} .cbox_con .slick-slide{display: none;float: left; min-height: 1px;} [dir='rtl'] .cbox_con .slick-slide{float: right;} .cbox_con .slick-slide img{display: block;} .cbox_con .slick-slide.slick-loading img{display: none;} .cbox_con .slick-slide.dragging img{pointer-events: none;} .cbox_con .slick-initialized .slick-slide{display: block;} .cbox_con .slick-initialized .slick-slide > div {position:relative; width:100%; height:100%; display:inline-block;} .cbox_con .slick-initialized .slick-slide > div .none {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; font-size:11px; color:rgba(255,255,255,0.6); height:auto !important; text-align:center;} .cbox_con .slick-initialized .slick-slide > div > div {position:relative; top:0; left:0; width:100%; height:100%;} .cbox_con .slick-initialized .slick-slide > div > div a {position:absolute; top:0; left:0; width:100%; height:100%; background-position:center center !important; background-size:cover !important; } .cbox_con .slick-initialized .slick-slide > div > div a:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,20,90,0.9); z-index:1;} .cbox_con .slick-initialized .slick-slide > div > div a:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.3); z-index:2; transition:all .3s;} .cbox_con .slick-initialized .slick-slide > div > div a:hover:after {background: rgba(0,0,0,0.5); z-index:2; transition:all .3s;} .cbox_con .slick-loading .slick-slide{visibility: hidden;} .cbox_con .slick-vertical .slick-slide{display: block; height: auto; border: 1px solid transparent;} .cbox_con .slick-arrow.slick-hidden {display: none;} .cbox_con .slider {width: 100%; margin: auto;} .cbox_con .slick-slide {margin: 0px 0;} .cbox_con .slick-slide img {position: absolute; top:10px; left: 50%; transform: translateX(-50%); max-width:110px; max-width:calc(100% - 30px); max-height: calc(100% - 70px); border-radius:10px;} .cbox_con .slick-prev:before, .cbox_con .slick-next:before {color: black;} .cbox_con .slick-slide {transition: all ease-in-out .3s; opacity: .2;} .cbox_con .slick-active {opacity: 1; } .cbox_con .slick-current {opacity: 1;} .cbox_con .slick-dots {position: absolute; bottom:20px; left:50%; transform:translateX(-50%); display: block; padding: 0; margin: 0; list-style: none; z-index:10;} .cbox_con .slick-dots li {position: relative; display: inline-block; width: 7px; height:7px; margin: 0 3px; padding: 0; cursor: pointer; border-radius:100%; overflow:hidden; transition:all .3s;} .cbox_con .slick-dots li button {font-size: 0; line-height: 0; display: block; width: 100%; height: 100%; padding: 10px 0; cursor: pointer; color: transparent; border: 0; outline: none; background:rgba(255,255,255,0.3);} .cbox_con .slick-dots li button:hover, .cbox_con .slick-dots li button:focus {outline: none; } .cbox_con .slick-dots li button:hover:before, .cbox_con .slick-dots li button:focus:before {opacity: 1;} .cbox_con .slick-dots li button:before {} .cbox_con .slick-dots li.slick-active{border-radius:10px;} .cbox_con .slick-dots li.slick-active button{background:#fff;} .cbox_con .slick-initialized .slick-slide > div > div a .srt_wrp {position:relative; width:100%; height:100%; padding: 45px; text-align:left; z-index:10;} .cbox_con .slick-initialized .slick-slide > div > div a .pic {position:absolute; top:25px; right:25px; width:35px; height:35px; background-position:center center !important; background-size:cover !important; border-radius:100%; overflow:hidden; transition:all .3s;} .cbox_con .slick-initialized .slick-slide > div > div a h2 {display:inline-block; width:100%; font-size:0;} .cbox_con .slick-initialized .slick-slide > div > div a:hover h2 {color:#0062c7; transition:all .3s;} .cbox_con .slick-initialized .slick-slide > div > div a h2 .ar1, .cbox_con .slick-initialized .slick-slide > div > div a h2 .ar2 {display:inline-block; vertical-align:middle; width:100%; font-size:35px; font-family:Noto Sans KR, sans-serif; font-weight:300; letter-spacing:-0.05em; color:#fff; transition:all .3s; line-height:110%;} .cbox_con .slick-initialized .slick-slide > div > div a h2 .ar1 {font-size:30px;} .cbox_con .slick-initialized .slick-slide > div > div a h2 .ar2 {padding-top:3px;} .cbox_con .slick-initialized .slick-slide > div > div a ul.srt_box {position:absolute; bottom:15px; left:0; width:100%; padding:45px;} .cbox_con .slick-initialized .slick-slide > div > div a ul.srt_box li {display:inline-block; width:100%; padding-top:2px;font-size:12px; overflow:hidden; color:rgba(255,255,255,0.6); text-overflow:ellipsis; white-space:nowrap;} .cbox_con .slick-initialized .slick-slide > div > div a ul.srt_box li span {color:#fff;} .cbox_con .slick-initialized .slick-slide > div > div a .app_cmp {position:absolute; bottom:-40px; right:-20px; font-family: 'GmSansB'; color:#142c6a; line-height:100%; font-size:130px; transition:all .3s;} .cbox_con .slick-initialized .slick-slide > div > div a:hover .app_cmp {right:-5px; transition:all .3s;} @media screen and (max-width: 650px){ .ct_slide_box .cbox_pos h4 {height:60px;} .ct_slide_box .cbox_pos h4 span {top:calc(50% + 5px); font-size:15px;} .ct_slide_box .cbox_pos h4 i {font-size:17px; top:0; right:0;} .ct_slide_box .cbox_pos .cbox_wrap {height:calc(100% - 60px);} .cbox_con .slick-slide img {max-width:calc(100% - 10px); max-height: calc(100% - 50px); } }