@charset "utf-8";
/* com2zoa design KYJ 20210910*/
/* com2zoa design KJH 20221220 전반 디자인 개편 */
/* com2zoa design KYJ coarding KJH 20241029 전반 디자인 개편 */
/* Common */
.mobile_bg {display: none; position: fixed; width: 100%; height: 100%;  left: 0; top: 0; background: #000; z-index:400}
.clear_fix:after {content: ""; display: block; clear: both}
.hide{display: none}
.hidden{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}

/* Layout */
#wrap {width: 100%; min-width: 320px; font-family:'NSQneo'}
#content{position: relative; z-index:1}
.content_area{font-family: 'SEBANG_Gothic'}
.contop_area h3.contop_tit span {padding:0 10px 0 0}
/* SNS */
.sns_btnbox{position: absolute; left:10px; top:10px}
.sns_btnbox ul li{display:inline-block; margin-right:2px}
.sns_btnbox ul li a {display:block}

/* Mainheader */
.headerwrap {position: relative; height: 127px; margin: 0 auto; text-align: center; background:rgba(0,0,0,0.3); box-shadow:0 3px 8px rgba(255,255,255,0.2)}
.header_top {background:url(../images/main/bg_header_line.png) repeat-x 0 10px}
.header_top .qmenu_tb{float: right}
.header_top .qmu_member{float: left}
.header_top .qmu_member>p{float: left}
.header_top .qmu_member>p a{display:block; height: 26px; line-height: 26px; padding:5px 8px; color:#fff; font-size: 14px; font-weight: 400}
.header_top .qmu_member>p a:hover{font-weight: 600}
.header_top .qmu_member>p:nth-child(2) a{padding-left: 5px}
.header_top .qmu_member>p:last-child a span{padding:0 5px 0 13px; border-left:1px solid #fff}
.header_top .qmu_btnbox{float: left}
.header_top .qmu_btnbox>p{float: left}
.header_top .qmu_btnbox>p a {display:block; margin:7px 4px 0}
.logo_top {position:absolute; top:53px; left:10px} 

/* Visual*/
.visual {position:relative; overflow:hidden}
.visual_wrap .slick-arrow {display:none !important}
.visual_wrap .slick-dots li button, .visual_wrap .btn_visual li button{border:none; background:none; font-size:0}
.visual_wrap .visual_item{display:block !important}
.visual_wrap .visual_item > a{position: relative; display:block; box-sizing:border-box}
.visual_wrap .visual_item span.vbg_txt{height:0; width:0; line-height:0; font-size:0;text-indent:-9999999px}
.visual_wrap .visual_item span.vimg_txt{height:0; width:0; line-height:0; font-size:0;text-indent:-9999999px}
/*블릿*/
.slick-dots {position: absolute; left:50%; top:50%; margin:100px 0 0 -45px; padding:4px 17px 4px 4px;border-radius: 50px}
.slick-dots li button{display:block; width:6px; height:6px}
.slick-dots li {float: left; display:inline-block;  margin: 0 3px 0 0; border:2px solid #fff;  border-radius:50px; cursor:pointer; box-shadow:2px 2px 3px rgba(0, 0, 0, 0.1); box-sizing: border-box}
.slick-dots li.slick-active {display:block; width:35px; height:10px; background:#fae95d; border-color:#fae95c}
/*재생,일시정지*/
.visual_wrap .btn_visual{position: absolute; left:50%; top:50%; margin:98px 0 0 20px}
.visual_wrap .btn_visual li{width:14px; height:14px}
.visual_wrap .btn_visual li.blind{display:none}
.visual_wrap .btn_visual button.vbtn_pause{width:14px; height:14px; margin:0; background:url(../images/main/vbtn_pause_p.png) 50% 50% no-repeat; cursor:pointer; border-radius:50% 50%}
.visual_wrap .btn_visual button.vbtn_pause.play{background:url(../images/main/vbtn_play_p.png) 50% 50% no-repeat} 

/********************************************* Layout **********************************************/
/***Content  Common***/    
.conline01 {overflow:hidden; position:relative; padding:30px 0}
.conline01_01 {position: relative; padding:0 10px}
.conline01_01:before {content:""; display: block; position: absolute; bottom:0; left:0; width:100%; height:219px; background:#f1f1f1}
.conline04 {background:#ddd}


/* Poplayer */
/*팝업레이어 노출시 컨텐츠위로 가려져서 버튼클릭 안될시에는 .popup_on{display:none}/.popup_on.active {display:block} 주면됨 */
.main_openpop .pop_tit {font-size: 15px; color:#fff; font-weight: 400}
.main_openpop .popup_on.active {display:block}
.main_openpop .popup_open{display: none}
.main_openpop .popup_layer_wrap{ overflow: hidden; position: relative; height: 330px;  background:rgba(255,255,255,0.8)}
.main_openpop button {overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px; cursor: pointer}
.main_openpop .slick-prev,.main_openpop .slick-next{position: absolute; bottom:20px; width:11px; height:16px; z-index: 500}
.main_openpop .slick-prev {left:10px; background:url(../images/main/btn_pop_prev.png) 0 0 no-repeat}
.main_openpop .slick-next {right:10px; background:url(../images/main/btn_pop_next.png) 0 0 no-repeat}
.main_openpop .popup_layer{position: relative; height:320px; padding-top:10px}
.main_openpop .popup_imgsize {width:300px; height:264px; margin: 0 auto; border-radius:5px;  background:url(../images/main/no_popup.jpg) no-repeat 0 center}
.main_openpop .popup_imgsize img{width:300px; height:264px; border-radius:5px; box-shadow:1px 3px 6px rgba(0, 0, 0, 0.1); background:#fff}
.main_openpop .popup_layer .popup_tit{display:block; font-size: 15px; font-weight:400; margin:20px 50px 21px}
.main_openpop .popup_layer .popup_tit a{display:block; overflow:hidden; color:#000; text-overflow:ellipsis; -o-text-overflow:ellipsis; -ms-text-overflow:ellipsis; white-space:nowrap}

.header_top .qmu_popup {float:left}
.header_top .qmu_popup {margin-right:15px}
.header_top .qmu_popup a {display:block; margin-top:2px;width:92px; height:32px; line-height:30px; padding:0 0 0 20px; border:1px solid rgba(255,255,255,0.3); border-radius:50px; box-sizing: border-box; background:url(../images/main/blt_popup_close.png) no-repeat 10px 50%; color:#fff}
.header_top .qmu_popup.openact a {background:url(../images/main/blt_popup_open.png) no-repeat 10px 50%}
.main_openpop .popup_on{display:none}
.main_openpop .popup_on.active {display:block}

/* notice */
.conline01{padding: 76px 10px}
#main_notice {width:773px}
.contop_line{border-bottom: 1px solid #e0e0e0}
.notice_box {overflow:hidden; position: relative; padding:43px 0 0 !important}
.notice_box h3 {position: absolute; top:0}
.notice_box .noticetab01 {left:-1px}
.notice_box .noticetab02 {left:94px}
.notice_box .noticetab03 {left:209px}
.notice_box .noticetab01.on, .notice_box .noticetab01:hover {left:-1px;/* border-right:0 */}
.notice_box .noticetab02.on, .notice_box .noticetab02:hover {left:94px}
.notice_box .noticetab03.on, .notice_box .noticetab03:hover {left:209px}
.notice_box h3 > a {position: relative; display: block; padding:18px 16px; line-height:140%; font-size:1.308em; font-weight:600; font-family:NSQ; color: #2a2a2a; text-align: center; z-index:1}
.notice_box h3.on > a {font-weight:600; color:#185094}
.notice_box h3 > a:after {content:"";display: block;position: absolute;left: 0;bottom:0;width: 0;height:59px; background:#fff;transition: width .5s;z-index:-1}
.notice_box h3.on > a:after {width: 100%}
.notice_box h3:hover > a:after {width: 100%}
.notice_box h3 > a:before {content:"";display: block;position: absolute;left: 0;top:0;width: 0;height:3px; background:#4792ec;transition: width .5s; z-index:0}
.notice_box h3.on > a:before {width: 100%}
.notice_box h3:hover > a:before {width: 100%}
.notice_box h3.on a span {position:relative; z-index:1}
.notice_box .btn_more {position: absolute; top:10px; right:0}
.notice_box .btn_more a {display:block; width:23px; height:23px; line-height:21px;text-align:center}
.notice_box .btn_more img {vertical-align: middle}
/*.notice_box .noticetb {overflow:hidden; }*/
.noticetb ul {overflow:hidden; height: 257px}
.noticetb li.first_list{position:relative; overflow:hidden; padding:10px 80px 10px 50px; line-height:30px; margin-top:0; background:url(../images/main/notice_a_blt_25.gif) no-repeat 16px 22px; color:#2c2c2c; font-weight: 400; text-overflow:ellipsis;  white-space:nowrap; box-sizing: border-box; border: 1px solid #ffda53; border-radius: 5px}
.noticetb li{position:relative; overflow:hidden; padding:5px 80px 5px 50px; line-height:34px; background:url(../images/main/notice_blt_25.gif)no-repeat #fff 16px 18px; color:#2c2c2c; font-weight: 400; text-overflow:ellipsis; white-space:nowrap; box-sizing: border-box; border: 1px solid #dddddd; border-radius: 5px; margin-top: 10px}
.noticetb li:hover{background:url(../images/main/notice_blt_25.png)no-repeat #ebf5f2 16px 18px}
.noticetb li a {display:block; width:95%; max-width:430px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#000;font-weight:300}
.noticetb li.first_list:hover {background:url(../images/main/notice_a_blt_25.png) #ebf5f2 no-repeat 16px 22px}
.noticetb .date {position:absolute; top:22px; right:12px; height:34px; line-height:34px; margin-top:-17px; text-align:right; font-weight:300; font-size:1em; letter-spacing:-0.5px; color:#8e8e8e; padding-left: 20px; background: url(../images/main/notice_time.png)no-repeat left center; color: #000; font-size: 12px}
.noticetb li a img {vertical-align:middle}

span.col_y{color: #ffda53; font-weight: 600}
span.col_r{color: #e83630; font-weight: 600}
span.col_b{color: #1c59a3; font-weight: 600}
span.col_p{color: #df2d91; font-weight: 600}
.contop_area h3.contop_tit span.contop_sub{padding-left: 10px}
.contop_area .noticetb{position:relative; padding-top: 20px; font-family: 'NSQneo'}
.contop_area .noticetb::after{display: block; clear: both; content: ''; position: absolute; bottom: 20px; left: 0; width:130px; height: 111px; border-radius: 0 80px 0 0; background: url(../images/main/bg_notice_25.png)no-repeat 0 0}
.contop_area .noticetb .conmid_sub{position:absolute; width: 143px; height: 74px;border-radius: 0 35px 35px 0; align-content: center; color: #000; font-size: 16px; font-weight: bold; padding-left: 14px;  background: url(../images/main/notice_icon_25.png)no-repeat right 18px  center #ffda53; box-sizing: border-box; font-family: 'SEBANG_Gothic'}
.contop_area .noticetb ul{position:relative; margin-left: 170px}
.noticetb li.first_list .tit a{font-size: 15px; font-weight: 600}
.noticetb li.first_list .txt a{font-size: 14px; font-weight: 500}

.conline_bg.c_bg01{background: url(../images/main/conline1_bg.gif)no-repeat center bottom 50px}

.conline_bg.c_bg02{position: relative}
.conline_bg.c_bg02::after{display: block; clear: both; content: ''; position: absolute; bottom: 60px; left:0; width:52%; height: 117px; border-radius: 0 80px 0 0; background: #588fd2 no-repeat 0 0; z-index: -1}
.conline_bg.c_bg02::before{display: block; clear: both; content: ''; position: absolute; bottom: 60px; right:0; width:50%; height: 117px; border-radius: 80px 0 0 0; background: #e76fb2 no-repeat 0 0; z-index: -2}


/* 컨텐츠 타이틀 공통 */
.contop_area {padding-bottom:16px}
.contop_area h3.contop_tit {height:43px; font-weight:600; font-size: 30px; color: #000}

.contop_area h3 .contop_sub{font-size: 15px; color: #787878; font-weight: 400}
.conbtn_area .btn_more {position:absolute; top:5px}
.conbtn_area .btn_arrow {position:absolute; top:0}
.conbtn_area .btn_arrow li button {width:38px; height:38px; line-height:34px; text-align: center; border:2px solid #eaeaea; background:#fff; box-sizing: border-box; border-radius:50% 50%}
.conbtn_area .btn_arrow li button img {vertical-align: middle}

/* 체험안내 */
.proinfo_wrap {position:relative}
.proinfo_wrap h3.contop_tit {color:#59c8c8}
.proinfo_wrap .conbtn_area .btn_more {left:148px}

.proinfo_area {position:relative; text-align: center; z-index:1}
.proinfo_img {position:relative; overflow: hidden; display:block; width:230px; height:308px; margin:0 auto; background:#fff url(../images/main/bg_logoimg.gif) no-repeat 50% 50%; box-shadow:1px 1px 5px rgba(0,0,0,0.1)}
.proinfo_img a {display:block}
.proinfo_img a:after {content:""; display: block; position: absolute; top:0; left:0; width:100%; height:0; margin:-100% 0 0 -100%; background:rgba(0,0,0,0.5) url(../images/main/bg_view_ico.png) no-repeat 50% 50%; transition:.7s; border-radius:0 0 100% 0}
.proinfo_img:hover a:after {height:100%; margin:0; border-radius:0}
/*.proinfo_img a {overflow: hidden; display:block; width:230px; height:308px; margin:0 auto}*/
.proinfo_img .img {width:100%}

/* 행사스케치 */
.photo_wrap  {position:relative; padding:0 10px 30px; margin-bottom:30px}
.photo_wrap h3.contop_tit {color:#4792ec}
.photo_wrap .conbtn_area .btn_more {left:212px}
.photo_area {position:relative; text-align: center}
.photo_box {position:relative; overflow: hidden; display:block; width:250px; height:320px; margin:0 auto; background:#fff}
.photo_img {overflow:hidden; position:relative; width:250px; height:166px; background:#e2e2e2 url(../images/main/none_photo_n.gif) no-repeat 50% 50%; border:1px solid #f3f3f3; box-sizing: border-box}
.photo_txt {padding:0 12px 12px}
.photo_txt .tit {display:block; padding:20px 5px; font-size:1.231em; font-weight:600}
.photo_txt .tit a {display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.photo_txt .txt {display:block; height:88px; line-height:140%; padding:16px 5px 0; background:#e7e7e7; box-sizing: border-box; word-break:break-all}
.photo_txt .txt a {height:57px; overflow: hidden;
text-overflow: ellipsis; display: -webkit-box;  -webkit-line-clamp:3; -webkit-box-orient: vertical; white-space: normal; font-size:1.077em}
.photo_img a {display:block}
.photo_img a:after {content:""; display: block; position: absolute; top:0; left:0; width:100%; height:0; margin:-100% 0 0 -100%; background:rgba(0,0,0,0.5) url(../images/main/bg_view_ico.png) no-repeat 50% 50%; transition:.7s; border-radius:0 0 100% 0}
.photo_img:hover a:after {height:100%; margin:0; border-radius:0}
.photo_img .img {width:100%}
.photo_wrap .btn_arrow {right:0}
.photo_wrap .conbtn_area .btn_arrow {background:#f1f1f1; border-radius:50px 50px}
.photo_wrap .conbtn_area .btn_arrow li:first-child {border-right:1px solid #fff}
.photo_wrap .conbtn_area .btn_arrow li button {height:30px;line-height:30px; border:0; border-radius:0; background:none}

/* 카드뉴스 */
.cardnews_wrap  {position:relative; padding:0 10px}
.cardnews_wrap h3.contop_tit {color:#ff7415}
.cardnews_wrap .conbtn_area .btn_more {left:212px}
.cardnews_area {position:relative; text-align: center; z-index:1}
.cardnews_box {position:relative; overflow: hidden; display:block; width:266px; height:322px; margin:0 auto; background:#fff}
.cardnews_img {position:relative; display:block; width:266px;height:266px; background:#fff url(../images/main/bg_logoimg.gif) no-repeat 50% 50%;  border:1px solid #efefef; box-sizing: border-box}
.cardnews_img a {display:block}
.cardnews_img a:after {content:""; display: block; position: absolute; top:0; left:0; width:100%; height:0; margin:-100% 0 0 -100%; background:rgba(0,0,0,0.5) url(../images/main/bg_view_ico.png) no-repeat 50% 50%; transition:.7s; border-radius:0 0 100% 0}
.cardnews_img:hover a:after {height:100%; margin:0; border-radius:0}
.cardnews_img .img {width:100%}
.cardnews_txt {font-size:1.154em; font-weight:600}
.cardnews_txt a {display: block; padding:22px 20px; overflow: hidden;  text-overflow: ellipsis; white-space: nowrap}

/* 예술공감터 */
.event_wrap  {position:relative; padding:0 10px 30px}
.event_wrap h3.contop_tit {color:#185094}
.event_wrap .conbtn_area .btn_more {left:180px}
.event_area {position:relative; text-align: center}
.event_box {position:relative; overflow: hidden; display:block; width:250px; height:320px; margin:0 auto; background:#fff; /* box-shadow:0 1px 4px rgba(0,0,0,0.1) */}
.event_img {overflow:hidden; position:relative; width:250px; height:166px; background:#e2e2e2 url(../images/main/none_photo_n.gif) no-repeat 50% 50%; border:1px solid #f3f3f3; box-sizing: border-box}
.event_txt {padding:0 12px 12px}
.event_txt .tit {display:block; padding:20px 5px; font-size:1.231em; font-weight:600}
.event_txt .tit a {display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.event_txt .txt {display:block; height:88px; line-height:140%; padding:16px 5px 0; background:#e7e7e7; box-sizing: border-box; word-break:break-all}
.event_txt .txt a {height:57px; overflow: hidden;
text-overflow: ellipsis; display: -webkit-box;  -webkit-line-clamp:3; -webkit-box-orient: vertical; white-space: normal; font-size:1.077em}
.event_img a {display:block; height:166px}
.event_img a:after {content:""; display: block; position: absolute; top:0; left:0; width:100%; height:0; margin:-100% 0 0 -100%; background:rgba(0,0,0,0.5) url(../images/main/bg_view_ico.png) no-repeat 50% 50%; transition:.7s; border-radius:0 0 100% 0}
.event_img:hover a:after {height:100%; margin:0; border-radius:0}
.event_img .img {width:100%}
.event_wrap .btn_arrow {right:0}
.event_wrap .conbtn_area .btn_arrow {background:#f1f1f1; border-radius:50px 50px}
.event_wrap .conbtn_area .btn_arrow li:first-child {border-right:1px solid #fff}
.event_wrap .conbtn_area .btn_arrow li button {height:30px;line-height:30px; border:0; border-radius:0; background:none}

/*Banner*/
#main_banner{padding:20px 10px}
.banner_wrap {position: relative; height:54px; padding:0 10px 0 0}
.banner_wrap h3.contop_tit {float: left; width:90px; padding:5px 0; font-size:17px; font-weight:600; font-family:NSQ}
/*버튼*/
.banner_wrap .ban_area{margin:0 0 0 115px}
.banner_wrap .ban_area ban_item_lst {display: flex}
.banner_wrap .ban_item a {overflow: hidden; display: block; width: 182px; height: 50px; margin: 0 auto; border:1px solid #e5e5e5; box-sizing: border-box}
#main_banner .banner_wrap .ban_item img {margin: 0 auto; width: 182px; height: 50px}
#main_banner .banner_wrap .btn_arrow {top:26px; left:0; right:inherit; width:100px; background:#efefef; border-radius:50px; text-align: center; box-sizing: border-box; padding:0 12px}
#main_banner .banner_wrap .btn_arrow li {float: left; margin:0}
#main_banner .banner_wrap .btn_arrow button {width:25px; height:22px; border:0}
#main_banner .banner_wrap .btn_arrow li:nth-child(2) button{border-left:0; border-right:0}
#main_banner .banner_wrap .btn_arrow span{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
#main_banner .banner_wrap .btn_arrow .ban_btn_prev{background:url(../images/main/btn_ban_prev.png) no-repeat 50% 50%}
#main_banner .banner_wrap .btn_arrow .ban_btn_stop{background:url(../images/main/btn_ban_stop.png) no-repeat 50% 50%}
#main_banner .banner_wrap .btn_arrow .ban_btn_next{background:url(../images/main/btn_ban_next.png) no-repeat 50% 50%}
#main_banner .banner_wrap .btn_more{position: absolute; left:72px; top:6px}

/* Footer */
#footwrap {background: #efefef}
/*Foot_sitewrap*/
.foot_sitewrap{margin: 0 15px; z-index:100}
.foot_site .site_box{width: 100%}
.foot_site .site_box>li {width:auto}
.foot_site .fsite {position: relative}
.foot_site .site_tit a{ display: block;  height: 38px; line-height: 38px; background:#373737; border-radius:0 0 10px 10px; color:#fff; font-size: 13px; font-weight: 500; transition:background-color .6s; text-align: center}
.foot_site .site_tit a:hover, .foot_site .active a{background:#505050}
.foot_site .site_tit a span{position: relative; background:url(../images/main/site_arw.png) no-repeat right center; padding-right:30px; margin-left: 35px}
.foot_site .site_tit a span::after{display: block; clear: both; content: ""; position: absolute; top:-2px; left:-30px; width: 21px; height: 21px; background:url(../images/main/icon_site.png) no-repeat right center}
.foot_site .active a span{background:url(../images/main/site_arw_down.png) no-repeat right center}
.foot_site .site_lst {display:none; position: absolute; height: 0; width:100%; background:#dadada; overflow-y:auto; box-sizing:border-box; border-radius:5px 5px 0 0; z-index: 100}
.foot_site .site_lst::-webkit-scrollbar {width: 12px}
.foot_site .site_lst::-webkit-scrollbar-track {background-color: rgba(0, 0, 0, 0.15); border-radius: 10px; box-shadow: inset 0px 0px 0px white}
.foot_site .site_lst::-webkit-scrollbar-thumb {background-color: #a7a7a7; border-radius: 10px; background-clip: padding-box; border: 2px solid transparent}
.foot_site .site_lst ul li a{top:-100px; left:0; padding: 10px 10px 10px 15px; border-bottom:1px solid #505050}
.foot_site .site_lst ul li a span{padding: 0 17px; background:url(../images/main/site_lst.gif) no-repeat center left;}
.foot_site .site_lst ul li a:hover span {background:url(../images/main/site_lst_a.gif) no-repeat center left; color:#2d7cc0} 
.foot_site .site_lst ul li:last-child a{border-bottom: none}
.foot_site .site_lst ul li a {display:block; overflow:hidden; width:100%;  font-size: 12px;  text-overflow:ellipsis;  white-space:nowrap; color:#2e2e2e; font-weight:500; box-sizing: border-box}
.foot_site .site_lst {display: block; bottom: 100%; left:0}

/*  ========2023 하반기 메인 컨텐츠 부분 리뉴얼========*/
/*유투브*/
.youtube_wrap {position:relative; margin-top:25px}
.youtube_wrap h3.contop_tit {color:#f24444}
.youtube_wrap .conbtn_area .btn_more {right:0}
.mov_area {overflow: hidden; position: relative; height:221px; margin:0 auto}
.ytp-cued-thumbnail-overlay-image {overflow:hidden}
.mov_area iframe,
.mov_area object,
.mov_area embed {position:absolute; top:0; left:0; width:100%; height:100%; min-width:298px}
.mov_area video {position:relative; width:100%; margin:0 auto; background:#000}
.mov_box {position: absolute; width: 100%; height: 100%; left: 0; top: 0;}
.mov_box iframe{width: 100%; height: 100%;}
.btn_move {margin-top:19px}
.btn_move a {display:flex; justify-content:space-between; align-items:center; padding:14px 10px 14px 80px; box-sizing: border-box; border-radius:10px; border:2px solid #f24444; font-size:1.231em; font-weight:600; color:#000; background:url(../images/main/bg_yutube_mark.gif) no-repeat 10px 50%}
.btn_move a span {display:inline-block; width:166px; height:38px; line-height:38px; color:#fff; padding:0 15px; background:#e83630 url(../images/main/btn_yutube_linkgo.png) no-repeat right 15px top 50%; border-radius:50px; box-sizing: border-box}
.btn_move a:hover {color:#f24444; transition: .3s}

/*운영프로그램*/
#main_operpro {position:relative; overflow: hidden; width:455px}
#main_operpro h3.contop_tit span {width:auto}
#main_operpro .contop_area .btn_more {position:absolute; top:12px; right: 0}
.operpro_box {position: relative; padding:74px 0 0}
.operpro_box h3 {position: absolute; top:0; box-sizing: border-box; font-size:1.077em; font-weight:500; background:#eee}
.operpro_box h3 a {position:relative; display: block; padding:12px 10px; box-sizing: border-box; text-align:center; color:#343434}
.operpro_box h3:hover a:after, .operpro_box h3.on a:after {content:""; display: block; position:absolute; bottom:-22px; left:50%; width:46px; height:22px; margin-left:-23px; background:url(../images/main/btn_operpro_tabon.png) no-repeat 50% 100%}
.operpro_box h3:hover a, .operpro_box h3.on > a {background:#f24444; transition:.3s; color:#fff}
.operpro_box .operpro01 {left:0; width:50%; border-radius:5px 0 0 0}
.operpro_box .operpro02 {left:50%; width:50%; border-radius: 0 5px 0 0}
.operpro_box .operpro01.on a  {border-radius:5px 0 0 0}
.operpro_box .operpro02.on a  {border-radius:0 5px 0 0}
.operpro_tb .operpro_lst {height:470px; box-sizing:border-box}
#main_operpro .conbtn_area .btn_arrow {top:-50px}
#main_operpro .conbtn_area {z-index:1000}

/* 운영프로그램 파트 */
.oper_item {width:296px; padding-bottom:5px}
.oper_box {position:relative; width:296px; margin:10px auto 0}
.oper_img {width:296px; height:170px; background:#e2e2e2 url(../images/main/none_photo_n.gif) no-repeat 50% 50%}
.oper_img img {width:296px; height:170px; transition:.3s}
.oper_img a {display: block; overflow:hidden; width:296px; height:170px; background:#e2e2e2 url(../images/main/none_photo_n.gif) no-repeat 50% 50%}
.oper_img a:hover img {transform:scale(1.1)}
.oper_info {position:relative; padding:16px 18px}
.oper_boxarea {overflow:hidden; width:296px; height:354px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,0.1)}
.oper_cate {position:absolute; top:-10px; left:10px; display: block; width:50px; height:40px; line-height:120%; text-align: center; background:#4d4d4d; color:#fff; box-sizing: border-box; padding:5px 10px; font-weight:600; z-index:1; border-radius:5px}
.oper_cate01 {background:#34bff9}
.oper_cate02 {background:#6bcb57}
.operpro_tb {/*min-height:466px*/ padding-bottom:30px}

.oper_type {display:inline-block; padding:1px 8px; height:23px; line-height:21px;  background:#d0d0d0; border-radius:50px; text-align: center; color:#000; font-weight:500; box-sizing:border-box}
.operinfo_tit {margin:11px 0; font-size:1.154em; font-weight:600; color:#111}
.operinfo_tit a {display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#171717}
.operinfo_lst li {line-height:160%; color:#000; font-weight:500}
.operinfo_lst li span {margin-right:5px; color:#767676; letter-spacing:-0.5px}

/* 운영프로그램 버튼 영역 */
.oper_info .btn_oper {width:100%; margin-top:13px; padding:9px; color:#fff; font-weight:500; font-size:1.077em; text-shadow:0 3px 4px rgba(0,0,0,0.1); border-radius:50px}
.oper_info .btn_oper01 {background:#ffba34} /* 오픈예정 */
.oper_info .btn_oper02 {background:#1c8de5} /* 수강신청 */
.oper_info .btn_oper03 {background:#444} /* 마감 */

.oper_catetxt {position:absolute; top:20px; right:20px; color:#717171}

/*================== kjh 추가 메인 부분 241029 ================*/
/* artquick */
.art_quick {display:block !important}

/*알림마당*/
#main_rptpro {position:relative; ; overflow: hidden; padding-bottom:30px}
#main_rptpro h3.contop_tit span {width:auto}
#main_rptpro .btn_more {position:absolute; top:-128px; right:-50px}
.rptpro_box {position: relative; padding:74px 0 0}
.rptpro_box h3 {position: absolute; top:0; box-sizing: border-box; font-size:1.077em; font-weight:500; background:#eee}
.rptpro_box h3 a {position:relative; display: block; padding:12px 10px; box-sizing: border-box; text-align:center; color:#343434; font-weight: 600}
.rptpro_box h3:hover a, .rptpro_box h3.on > a {background:#1c59a3; transition:.3s; color:#fff}
.rptpro_box .rptpro01 {left:0; width:50%; border-radius:20px 20px 0 0}
.rptpro_box .rptpro02 {left:50%; width:50%; border-radius: 0 5px 0 0; border-radius: 20px 20px 0 0}
.rptpro_box .rptpro01.on a  {border-radius:20px 20px 0 0}
.rptpro_box .rptpro02.on a  {border-radius:20px 20px 0 0}
.rptpro_tb {position:relative}
.rptpro_tb .rptpro_lst {height:470px; box-sizing:border-box}
#main_rptpro .btn_arrow {top:-125px; z-index:1}
#main_rptpro .conbtn_area {z-index:1000}

/* 알림마당 */
.rpt_item {width:160px; padding-bottom:5px}
.rpt_box {position:relative; width:162px; margin:0 auto}
.rpt_img {position:relative; overflow:hidden; width:162px; height:238px; background:#e2e2e2 url(../images/main/none_photo_n.gif) no-repeat 50% 50%}
.rpt_img img {display:block; width:162px; height:238px; transition:.3s}
.rpt_img a {display: block; overflow:hidden; width:162px; height:238px; background:#e2e2e2 url(../images/main/none_photo_n.gif) no-repeat 50% 50%}
.rpt_img a:hover img {transform:scale(1.1)}

.rpt_img a:after {content:""; display: block; position: absolute; top:0; left:0; width:100%; height:0; margin:-100% 0 0 -100%; background:rgba(0,0,0,0.5) url(../images/main/bg_view_ico.png) no-repeat 50% 50%; transition:.7s; border-radius:0 0 100% 0}
.rpt_img:hover a:after {height:100%; margin:0; border-radius:0}
.rpt_info {padding:19px}
.rpt_boxarea {overflow:hidden; width:162px; height:238px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,0.1)}


/*예술마당*/
#main_artpro {position:relative; ; overflow: hidden}
#main_artpro h3.contop_tit span {width:auto}
#main_artpro .btn_more {position:absolute; top: 12px; right:0}
.artpro_box {position: relative; padding:74px 0 0}
.artpro_box h3 {position: absolute; top:0; box-sizing: border-box; font-size:1.077em; font-weight:500; background:#eee}
.artpro_box h3 a {position:relative; display: block; padding:13px 10px; box-sizing: border-box; text-align:center; color:#343434; font-weight: 600}
.artpro_box h3:hover a, .artpro_box h3.on > a {background:#df2d91; transition:.3s; color:#fff;border-radius: 20px 20px 0 0}
.artpro_box .artpro01 {left:0; width:50%; border-radius:20px 20px 0 0}
.artpro_box .artpro02 {left:50%; width:50%; border-radius: 0 5px 0 0; border-radius: 20px 20px 0 0}
.artpro_box .artpro01.on a  {border-radius:20px 20px 0 0}
.artpro_box .artpro02.on a  {border-radius:20px 20px 0 0}
.artpro_tb {position:relative}
.artpro_tb .artpro_lst {height:470px; box-sizing:border-box}
#main_artpro .btn_arrow {top:-125px; z-index:1}
#main_artpro .conbtn_area {z-index:1000}

/*예술마당*/
.art_item {width:160px; padding-bottom:5px}
.art_box {position:relative}
.art_img {position:relative; overflow:hidden; width:223px; height:148px; background:#e2e2e2 url(../images/main/none_photo_n.gif) no-repeat 50% 50%}
.art_img img {display:block; width: 223px; height:148px; transition:.3s}
.art_img a {display: block; overflow:hidden; width:223px; height:138px; background:#e2e2e2 url(../images/main/none_photo_n.gif) no-repeat 50% 50%}
.art_item:hover .art_boxarea .art_tit{color: #df2d91}

.art_boxarea .art_txt{padding: 15px 10px}
.art_boxarea .art_txt span{display:block; width:95%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight: 600; text-align:left; font-family: 'NSQneo'; margin: 0 auto; color: #000}
.art_boxarea .art_txt span.art_tit{font-size: 14px; padding-bottom: 10px}
.art_boxarea .art_txt span.art_sub{min-height:13px; font-size: 13px; font-weight: 500}
.art_boxarea .art_txt span.date{font-weight: 300; text-align: right; padding-top: 12px}

.art_info {padding:19px}
.art_boxarea {overflow:hidden; width:223px; height:238px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,0.1); border-radius: 20px; margin: 0 auto}

/*********************************/
/********* MOBILE LAYOUT *********/
/*********************************/
@media only screen and (max-width:1024px) {
/* Layout */
/*Mainheader */
.pc_skip{display:none}
.headerwrap{position: absolute; top:0; left:0; width: 100%; height:98px; min-width: 320px; margin: 0; z-index:100; text-align: left}
.header_top .header_box{position: relative; height:97px; margin:0}
.logo_top img {width:170px; height:auto}

/* SNS */
.sns_btnbox{left:10px; top:10px; right: inherit}
.sns_btnbox ul li {margin-right:0}

/* Mobile Menu */
.header_top .qmenu_tb{float:none}
.header_box .qmu_btnbox{position: absolute; top:58px; right:8px}
.header_box .qmu_btnbox >p{margin-left:3px}
.header_box .qmu_btnbox >p.qmu_site{margin-left: 3px}
.header_box .qmu_btnbox .qmu_search a, .header_box .qmu_btnbox .qmu_site a{display: block; width:29px; height:29px; line-height:27px; margin:0; border-radius:50% 50%; border:1px solid rgba(255,255,255,0.3); text-align: center}
.qmu_btnbox .qmu_search a img, .qmu_btnbox .qmu_site a img {transform:scale(90%); vertical-align: middle}
.qmu_popup a, .openact > a{display: block; width:29px; height:29px; background:#fff url(../images/main/btn_pop_ico.png) no-repeat 50% 50%; border-radius:50% 50%}
.header_top .qmu_btnbox>p a {margin-top:0}

/* GNB */
.mobile_bg{z-index: 500 !important}
#gnb {display: none; position:fixed; top:0; right:0;  width: 260px; height:100%; min-height:100%; background:#fff; color:#093458; z-index:1000; overflow-y:auto; box-sizing:border-box}
.gnb_toparea {padding:0 3px 7px; background:#292f45}
#gnb p.mb_gnbtit{display: block; height:58px; line-height: 58px; font-size:18px; font-weight:500;color:#fff}
#gnb p.mb_gnbtit span{padding-left:15px}
/*GNB_상단*/
#gnb .allbtnclose .closebtn {display:block; width: 40px; height: 39px; margin: 5px; font-size:0; line-height:0; text-indent:-9999px; overflow: hidden; position:absolute; top:4px; right:0; background: url(../images/main/btn_menu_close.png) no-repeat left top}
#gnb  .gnb_mbtxt{margin-bottom: 10px; text-align: center}
/*GNB_메뉴버튼*/
#gnb .gnb_mbtn li {width:50%; height: 32px; line-height: 32px}
#gnb .gnb_mbtn li:first-child{float: left}
#gnb .gnb_mbtn li:first-child a {background:#7f828f; border-radius: 7px}
#gnb .gnb_mbtn li:last-child{float: right}
#gnb .gnb_mbtn li:last-child a {background:#54596a; border-radius: 7px}
#gnb .gnb_mbtn li a {display:block; margin:0 2px; color:#fff; font-size: 14px; font-weight: 500; text-align: center}
/*GNB_메뉴타이틀*/
#gnb .gnb_list .depth1 > h2 a {border-bottom:1px solid #cacaca; display:block; line-height:49px; font-size:16px; font-weight:500; padding:0 0 0 15px; margin:0; width:auto; background:url(../images/main/blt_gnbsub_off.gif) no-repeat right 10px top 50%; color:#303030}
#gnb .gnb_list .depth1 > h2 a[target=_blank] span{display:inline-block; padding-right:15px}
#gnb .gnb_list .act > h2 a  {background:#2b91d9 url(../images/main/blt_gnbsub_on.gif) no-repeat right 10px top 50%; color:#fff}
/*GNB_메뉴세부*/
#gnb .gnb_list .depth1 .navi_sub {display:none; position: relative; width: 230px; padding:15px; border-bottom:1px solid #cacaca}
#gnb .gnb_list .depth1 .navi_sub ul>li{background:url(../images/main/blt_gnbthird_off.gif) no-repeat left 11px}
#gnb .gnb_list .depth1 .navi_sub ul>li:hover{background:url(../images/main/blt_gnbthird_on.gif) no-repeat left 11px}
#gnb .gnb_list .depth1 .navi_sub ul>li:last-child{border-bottom: none}
#gnb .gnb_list .depth1 .navi_sub ul>li>a {line-height:180%; display:block; padding:5px 0 5px 12px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow: hidden; font-weight: 400}
#gnb .gnb_list .depth1 .navi_sub ul>li>a[target=_blank] span{display:inline-block; padding-right:15px}
#gnb .gnb_list .depth1 .navi_sub ul>li:hover>a {color:#44617c; font-weight:500; text-decoration: underline; color:#ff683c}

/* Visual */
.visual .visual_wrap {position: relative;  margin: 0 auto}
.visual .visual_item{width:auto; height:356px; margin: 0 auto}
.visual_wrap .visual_item > a{height:356px}
.visual .item1{background:url(../images/main/v_m01.jpg) no-repeat top center}
.visual .item2{background:url(../images/main/v_m02n.jpg) no-repeat top center}
.visual .item3{background:url(../images/main/v_m03n.jpg) no-repeat top center}

/*버튼 2개*/
.visual .item3 .visual_btn a{display: block; width:251px; height:43px}
.visual .item3 .visual_btn.visual_btn01{position: absolute; top:50%; left:50%; margin: -20px 0 0 -125px}
.visual .item3 .visual_btn.visual_btn02{position: absolute; top:50%; left:50%; margin: 30px 0 0 -125px}
.visual .item3 .visual_btn.visual_btn01 a{background:url(../images/main/v_btn_m01.png) no-repeat top center}
.visual .item3 .visual_btn.visual_btn02 a{background:url(../images/main/v_btn_m02.png) no-repeat top center}
.visual .item3 .visual_btn a span{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
.visual_wrap .btn_visual{margin:86px 0 0 0}
.visual_wrap .btn_visual li{position: absolute; left:25px; top:0}
.slick-dots {margin:84px 0 0 -45px}

/* 컨텐츠 공통영역 */
/*Photo*/
.album_wrap .more img{transform: scale(90%)}


/* 공통 버튼 및 타이틀 */
.conbtn_area .btn_more {top:25px}
.conbtn_area .btn_arrow {top:10px}
.conbtn_area .btn_arrow li {display: block; position: absolute; top: 50%; margin-left:5px}
.conbtn_area .rptpro02 .btn_arrow li{right: 0}
.conbtn_area .btn_arrow li.leftarr{left: 0}
.conbtn_area .btn_arrow li.rightarr{right: 0}
.conbtn_area .btn_arrow li button {width:32px; height:32px; line-height:28px}
.conbtn_area .btn_arrow li button img {transform:scale(80%)}

#main_banner .conbtn_area .btn_arrow li:nth-child(1){left: -10px}
#main_banner .conbtn_area .btn_arrow li:nth-child(2){left: 50%; margin-left: -22px}
#main_banner .conbtn_area .btn_arrow li:nth-child(3){right: 10px}


/* 체험안내 */
.proinfo_wrap .conbtn_area .btn_more {left:90px}

/* 현장스케치 */
.photo_wrap:before {content:""; display: block; position:absolute; bottom:0; left:0; width:100%; height:187px; background:#f6f6f6}
.photo_wrap .conbtn_area .btn_more {left:110px}
.photo_wrap .conbtn_area .btn_arrow {top:14px; right:10px}

/* 카드뉴스 */
.cardnews_wrap .conbtn_area .btn_more {left:90px}
.cardnews_wrap .conbtn_area .btn_arrow {right:10px}
.cardnews_txt {background:#eaeaea}

/* 예술공감터  */
.event_wrap:before {content:""; display: block; position:absolute; bottom:0; left:0; width:100%; height:187px; background:#f6f6f6}
.event_wrap .conbtn_area .btn_more {left:110px}
.event_wrap .conbtn_area .btn_arrow {top:14px; right:10px}

/* notice */
.conline.conline03{padding-bottom: 40px}
.conline01{padding: 76px 10px 50px}
.conline_bg.c_bg01{background: none}
.conline_bg.c_bg01::before{display: none}
#main_notice{width: 100%; margin-bottom: 30px} 
/* youtube */
#main_operpro{width: 100%; height:100%}
.mov_area{border-radius: 20px; width: 396px; height: 260px}

/* 알림마당 */
.conline03_01{margin-bottom: 30px}
.conline_bg.c_bg02::after{bottom: 420px; width: 100%; border-radius: 0}
#main_rptpro .rptpro_wrap{padding: 0 10px}
#main_rptpro .btn_arrow{top: 100px; width: 100%}
#main_rptpro .btn_arrow .rptpro_tb .leftarr{left: 10px}
.conline_bg.c_bg02::before{display: none}
#main_rptpro{position: relative}
#main_rptpro::before{display: block; clear: both; content: ''; position: absolute; bottom: 10px; left: 0; width:100%; height: 117px; background:#1c59a3}

/* 예술교육 */
#main_artpro .artpro_wrap{padding: 0 10px}
.artpro_box{padding: 78px 0 26px}
#main_artpro .btn_arrow{top: 100px; width: 100%} 
.conline_bg.c_bg02::after{display: none}
#main_artpro{position: relative}
#main_artpro::before{display: block; clear: both; content: ''; position: absolute; bottom: 0; left: 0; width:100%; height: 117px; background:#df2d91}

/* 배너 */
#main_banner .banner_wrap .ban_item a {width:160px; height:44px; margin:2px auto}
#main_banner .banner_wrap .ban_item img {width:160px; height:44px}

/* Footer */
/*MB버튼*/
#footwrap .foot_area{position:relative}
#footwrap .foot_menu .foot_mlst{position: relative; text-align:center}
#footwrap .foot_menu .mb_menu{margin:0 auto; text-align:center}
#footwrap .foot_menu .mb_menu li {display:inline-block; padding:6px 8px; margin: 0; height: 31px; line-height: 31px; background:url(../images/main/foot_bar.gif) no-repeat left center}
#footwrap .foot_menu .mb_menu li:first-child {background:none}
#footwrap .foot_menu .mb_menu li a {display:block; color:#000; font-size: 13px; font-weight: 400}
#footwrap .foot_menu .mb_menu .li_home span{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
#footwrap .foot_menu .mb_menu .li_home a{width:31px; height: 30px; background:url(../images/main/ico_fhome.gif) no-repeat left center}
/*PC버튼*/
#footwrap .pc_menu {margin: 0 15px 20px; border-radius: 5px; text-align:center; font-weight: 500; border:1px solid #cfcfcf} 
#footwrap .pc_menu  li{ display:block; width:50%}
#footwrap .pc_menu  li.li_1, #footwrap .pc_menu li.li_3 {float: left}
#footwrap .pc_menu  li.li_2, #footwrap .pc_menu li.li_4 {float: right}
#footwrap .pc_menu  li a{display: block; padding: 12px 0; color:#000}
#footwrap .pc_menu  li.li_1 a, #footwrap .pc_menu li.li_3 a{border-right:1px solid #cfcfcf}
#footwrap .pc_menu  li.li_3 a, #footwrap .pc_menu li.li_4 a{border-top:1px solid #cfcfcf}
#footwrap .pc_menu  li.li_2 a{color:#0064b9}
/*주소*/
#footwrap .add{position: relative; word-break: keep-all; padding-bottom: 20px}
#footwrap .add .foot_logo{margin-top:10px; text-align: center; transform: scale(70%)}
#footwrap .add .address{width:auto; line-height:160%;  padding:0 10px; color:#7b7b7b; text-align: center; font-weight:500}
#footwrap .add .address span.add_txt{display: block;  color:#343434}
#footwrap .add .address p.copy{margin-top:5px; color:#9b9b9b; font-weight: 400}
#footwrap .count_box{display:none}
#footwrap .btn_admin{display:none}
/********************************************* Layout **********************************************/

/***Content  Common***/   
.mb_none{display: none}

/*TIT*/
.conline .cont_tit .txt{font-size: 14px}
.conline .cont_tit .imgtit{margin-top:10px}
.conline .cont_tit .imgtit img{transform: scale(0.8)}

/* Poplayer */
.main_openpop .popup_open{display:none}
.main_openpop{ position: absolute; top:98px; right:0; width: 100%; z-index:200}
.main_openpop .popup_layer .popup_tit{top:10px}
.main_openpop .popup_on{display:none;width: 100%; margin: 0 auto; text-align: center; box-shadow:2px 4px 6px rgba(0, 0, 0, 0.1)}
.main_openpop .popup_layer_wrap {background:rgba(255,255,255,0.9)}

.header_top .qmu_popup {float:right; margin:5px 10px 4px 0}
.header_top .qmu_popup a {padding:0 0 0 30px}
    
/* 퀵*/
.art_quick {position:relative; min-width: 310px; top:inherit !important; font-family: 'SEBANG_Gothic'}
#quickmenu .quick_wrap {position:absolute; bottom: -46px; right:0; width:100%; background: #008cd6; z-index: 1}
.aquick_tit, .art_quick .btn_top {display:none}
#quickmenu .quick_wrap .quick_btns{padding: 10px; display: flex; justify-content: space-around; align-content: center}
#quickmenu .quick_wrap .quick_btns li{position:relative; width:calc(33.3% - 10px); transition: all .3s; background:#fff; border: 2px solid #fff; border-radius: 8px}
#quickmenu .quick_wrap .quick_btns li a{display:block; height:46px; line-height: 44px; padding-top:2px; color:#fff; box-sizing: border-box; text-align: center; background:url(../images/main/quick_icon1_25.png) no-repeat 10px 50%}
#quickmenu .quick_wrap .quick_btns li:nth-child(2) a{background:url(../images/main/quick_icon2_25.png) no-repeat 10px 50%}
#quickmenu .quick_wrap .quick_btns li:nth-child(3) a{background:url(../images/main/quick_icon3_25.png) no-repeat 10px 50%}
#quickmenu .quick_wrap .quick_btns li a span{position:absolute; display: inline-block; top:4px; right:5px; height:38px; padding:5px 20px; line-height: 30px; font-size:1.077em;  border-radius: 8px; font-weight: 600; background: #fdcf07; box-sizing: border-box}
#quickmenu .quick_wrap .quick_btns li:nth-child(2) a span{background: #db1587}
#quickmenu .quick_wrap .quick_btns li:nth-child(3) a span{background: #008cd6}
#quickmenu .quick_wrap .quick_btns li:nth-child(1):hover{border: 2px solid #fdcf07}
#quickmenu .quick_wrap .quick_btns li:nth-child(2):hover{border: 2px solid #db1587}
#quickmenu .quick_wrap .quick_btns li:nth-child(3):hover{border: 2px solid #00669c}

#main_rptpro .btn_more {top: 12px; right: 0}

}

/*********************************/
/*********** PC LAYOUT ***********/
/*********************************/
@media only screen and (min-width:1025px) {
.mb_skip{display:none}
#wrap {min-width:1320px}
#content{position: relative}
.btn_top_pc{position: absolute; top:35px; right:50%; margin-right: -670px}

/* Main */
.header_btn{position: relative; align-content: center; width: 1300px; height:48px; margin: 0 auto}
.logo_top {top:60px; left:-2px} 

/* GNB */
.gnb_box{height: 80px; margin:0 auto}
#gnb .allbtnclose, #gnb .mbl_area, #gnb .navi_sub {display: none}
#gnb {width: 1000px; padding:0 0 0 300px; margin: 0 auto}
#gnb .mb_gnbtit, #gnb p.gnb_mbtxt{display: none}
#gnb .depth1 {position: relative; float: left; text-align: center}
#gnb .depth1 h2 a {display:inline-block; padding:29px 23px; text-align: center; font-size:1.538em; color: #fff; font-weight:400; font-family:NSQ; transition: all .4s}
#gnb .navi_sub{position: absolute; left:50%; top:74px; width:240px; padding:10px 0; margin-left:-125px; border-radius:0 0 15px 15px; box-shadow:0 5px 10px rgba(0, 0, 0, 0.1); border-top:5px solid #008cd6; background:#fff}
#gnb .navi_sub li{border-bottom: 1px solid #ccc}
#gnb .navi_sub li:last-child{border-bottom:none}
#gnb .navi_sub a {display: block; line-height: 140%; padding: 5px; margin: 5px; text-align: center; font-size:1.154em; font-weight: 500}
#gnb .navi_sub a:hover, #gnb .depth1.active .navi_sub .depth2 > li.active a{color:#305cad}
#gnb .navi_sub li:first-child a{margin-top: 0}
#gnb .navi_sub li:last-child a{margin-bottom: 0; border:none}
#gnb .depth1.active .navi_sub{display: block; z-index: 30}
#gnb .depth1.active .navi_sub .depth2 > li.active a{color:#305cad; font-weight:400}

/* Visual */ 
.visual .visual_wrap {position: relative; width: 100%; margin: 0 auto}
.visual .visual_item{width:auto; height:638px}
.visual .item1{ background:url(../images/main/v_pc01.jpg) no-repeat top center}
.visual .item2{background:url(../images/main/v_pc02n.jpg) no-repeat top center}
.visual .item3{background:url(../images/main/v_pc03n.jpg) no-repeat top center}
.slick-dots { padding:0}


/********************************************* Layout **********************************************/
/***Content  Common***/   
.pc_none{display: none}
.conline01{display: flex; justify-content: space-between; width:1300px; margin:0 auto; padding:70px 0}
.conline02{position: relative}

.conline03 {display: flex; justify-content: space-between; width:1300px; margin:0 auto; height: 470px}
.conline01_01 {float:right; width:456px; margin-left:40px; padding:0}
.conline02_01 {width:1300px; margin:0 auto; padding-bottom:50px}
.conline03_01 {width:638px}  
.conline03_02 {width:608px}  

/*Poplayer */
.content_poplayer{ position: relative; z-index: 1000}
.main_openpop{position: relative}
.main_openpop .popup_open{display:block}
.main_openpop .popup_on{position: absolute; top:-420px; right:15px; width: 320px; height:350px}
.main_openpop .popup_layer_wrap{border-radius:5px; box-shadow:5px 5px 10px rgba(0, 0, 0, 0.05); text-align: center}
.main_openpop .popup_open > a span{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
.main_openpop .popup_open > a{display:block; position: absolute; top:-465px; left:0; width:53px; height:44px; background:url(../images/main/btn_ray_pop.png) 0 0 no-repeat; z-index:1000}
.main_openpop .openact > a{position: absolute; top:-465px; left:340px; width:44px; height:44px; background:url(../images/main/btn_ray_pop_a.png) 0 0 no-repeat}
.main_openpop>p{display: block}


/* 컨텐츠 공통 영역 */
.contop_area h3.contop_tit {display:flex; align-items:baseline; height: 43px}


/* 체험안내 */
.proinfo_wrap {float:left; width:480px; padding-left:38px}

/* 현장스케치 */
.photo_wrap {margin:0; padding:0; float:left; width:620px}
.photo_wrap .contop_area {padding-bottom:50px}
.photo_txt .txt {padding:16px 10px 0; text-align:left}

/* 카드뉴스 */
.cardnews_wrap {float:left; width:290px; padding:0 0 0 30px}

/* 얘술공감터 */
.event_wrap {margin:0; padding:0; float:right; width:620px}
.event_wrap .contop_area {padding-bottom:50px}
.event_txt .txt {padding:16px 10px 0; text-align:left}

/*Banner*/
#main_banner{width: 1300px; margin: 0 auto; padding:17px 0}
.banner_wrap {padding:0; height:50px}
.banner_wrap h3.contop_tit {margin-top:-5px; font-size:19px}
#main_banner .banner_wrap .btn_more {top:2px; left:84px}
#main_banner .banner_wrap .btn_arrow {top:28px}

/* Footer */
#footwrap {background:#efefef url(../images/main/bg_footer_line.gif) repeat-x 0 0}
.footer_wrap {width: 1300px; margin: 0 auto; padding-bottom: 40px}
#footwrap .foot_area {position: relative; width:1300px}
#footwrap .mb_menu {display:none}
#footwrap .pc_menu:after {content:""; clear:both; display:block; height:0}
#footwrap .pc_menu li {float:left; height:72px; line-height:72px; padding: 0 20px; background:url(../images/main/foot_bar.gif) left center no-repeat; text-align: center}
#footwrap .pc_menu li:first-child{background: none}
#footwrap .pc_menu li a {font-size:14px; color:#000; font-weight:400}
#footwrap .pc_menu li a:hover{font-weight:600}
#footwrap .pc_menu  li.li_2 a{color:#0064b9; font-weight:500}
#footwrap .pc_menu  li.li_2 a:hover{color:#166ea5}
#footwrap .add_area{position: relative; width: 1300px; margin: 26px auto 0; padding-bottom:0}
#footwrap .add_area .foot_logo{float:left; margin-right:40px}
#footwrap .add_area .add{font-size:1.077em; color:#111; line-height: 150%; font-weight: 500; text-align: left}
#footwrap .add_area .copy{margin: 20px 0; color:#aeaeae; font-size:13px}
#footwrap .add_area .add br{display: none}
/*주소*/
#footwrap .add .foot_logo{margin-top: 20px; text-align: center; transform: scale(90%)}
#footwrap .add_area{position: relative; width: 1300px; margin:20px auto 0; padding-bottom:0}
#footwrap .add_area .foot_logo{position: absolute; top:0; left:0; margin:0; text-align:left; transform: scale(100%)}
#footwrap .add_area .add{margin-left: 280px;}
#footwrap .add_area .copy{margin: 5px 0 0; color:#aeaeae}
/*Admin*/
#footwrap .btn_admin{position: absolute; top:15px; right:200px}
#footwrap .btn_admin a{display: block; width:120px; height:40px; line-height:40px; border-radius:50px ; background-image:url(../images/main/icon_admin.png); background-repeat: no-repeat; background-position: 8px center; background-color:#505050; color: #fff; font-size:13px; font-weight: 400; transition: all .3s}
#footwrap .btn_admin a:hover{ background-color:#399fde}
#footwrap .btn_admin a span{margin-left:52px; font-size:1.077em}
/*Foot_sitewrap*/
.foot_sitewrap {float: right; width: 190px; height:40px; margin:15px 0 15px 12px; position: relative}
.foot_site .site_tit a {height:40px; line-height:40px; padding:0 15px; border-radius:50px 50px; text-align:left}
.foot_site .site_tit.active a {border-radius:0 0 10px 10px}
.foot_site .site_tit a span {padding-right:72px}
/* Footer_count */ 
#footwrap .count_box {display:block; position: absolute; top:0; right:0; width:346px; height: 51px; border-radius:10px; border:1px solid #d7d7d7;background:url(../images/main/ico_count.gif) 8px center no-repeat #fff; box-sizing: border-box}
#footwrap .count_box ul {margin-left: 40px; border-radius: 10px}
#footwrap .count_box ul li{float: left; width:45%; height:50px; line-height:50px; font-size: 13px; color:#3a3a3a; font-weight: 500; box-sizing: border-box}
#footwrap .count_box ul li p {position:relative; margin-right:10px}
#footwrap .count_box ul li.total {width:55%}
#footwrap .count_box ul li:first-child{color:#f55d5d}
#footwrap .count_box ul li:last-child{border-left:1px solid #e7e7e7}
#footwrap .count_box ul li span.tit{padding-left: 12px; margin-left: 10px; background:url(../images/main/blt_count.gif) left center no-repeat; color:#3a3a3a}
#footwrap .count_box ul li span.txt {position:absolute; top:50%; right:0; margin-top:-25px}

/* 움직이는 퀵 */
#quickmenu {font-family: 'SEBANG_Gothic'; position: absolute; left: 15px; top:240px; z-index:999}
#quickmenu .quick_wrap{position: relative; width:186px; padding:15px; background: #eeeeee; border-radius: 5px; box-shadow: 0 5px 3px  rgba(0,0,0,0.15); box-sizing: border-box}
#quickmenu .quick_wrap::before{display: block; clear: both; content: ''; position: absolute; top: -10px; left:-10px; width:240px; height: 56px; border-radius: 5px; background: url(../images/main/bg_quick_tit_25.png)#008cd6 no-repeat right 16px top 18px; z-index: -1}
.aquick_tit {display:block; position:absolute; top:0; left:0; width:186px; height:40px; line-height:48px; text-align: center; border-radius:50px 0 0 50px}
.aquick_tit span {display:inline-block; height:40px; padding:0 24px; border-bottom: 1px solid #8e8e8e; font-size:17px; font-weight:600; color:#008cd6}
#quickmenu .quick_wrap .quick_btns{padding-top:28px}
#quickmenu .quick_wrap .quick_btns li{position: relative; transition: all .3s; text-align: right; border:2px solid #fff; border-radius: 5px; margin: 10px 0; padding: 5px 8px}
#quickmenu .quick_wrap .quick_btns li a {display:block; height:44px; line-height:44px; box-sizing: border-box; font-weight:600; font-size: 15px; color: #fff}
#quickmenu .quick_wrap .quick_btns li:first-child a {border-top:0}
#quickmenu .quick_wrap .quick_btns li:nth-child(1):hover{border: 2px solid #fdcf07}
#quickmenu .quick_wrap .quick_btns li:nth-child(2):hover{border: 2px solid #db1587}
#quickmenu .quick_wrap .quick_btns li:nth-child(3):hover{border: 2px solid #00669c}
    
#quickmenu .quick_wrap .quick_btns li:first-child {background:url(../images/main/quick_icon1_25.png)#fff no-repeat 10px 50%}
#quickmenu .quick_wrap .quick_btns li:nth-child(2) {margin:10px 0;background:url(../images/main/quick_icon2_25.png)#fff no-repeat 10px 50%}
#quickmenu .quick_wrap .quick_btns li:nth-child(3) {background:url(../images/main/quick_icon3_25.png)#fff no-repeat 10px 50%}

#quickmenu .quick_wrap .quick_btns li .btn_qmn{padding: 5px 14px; border-radius: 10px; background: #fdcf07}
#quickmenu .quick_wrap .quick_btns li:nth-child(2) .btn_qmn{ background: #d8007c}
#quickmenu .quick_wrap .quick_btns li:nth-child(3) .btn_qmn{ background: #008cd6}


#quickmenu .btn_top {margin-top:15px;z-index: 100}
#quickmenu .btn_top a {display: block; width:100%; background:#717171; padding:5px; text-align: center; box-sizing:border-box; border-radius:5px; color:#fff; text-align: center}
#quickmenu .btn_top a span {display:inline-block; padding:0 20px 0 0; background:url(../images/main/btn_toparr.png) no-repeat 100% 50%; font-weight:600; font-size: 16px}

/* ========= 2023 하반기 메인 추가 수정 작어 =========== */   
/*유투브*/
.youtube_wrap {float:right; width:462px; padding-left:40px; margin:0}
.mov_area {width:396px; height:260px; border-radius: 20px}
.btn_move {margin-top:40px}

/* 운영프로그램 */
#main_operpro h3.contop_tit {text-align: center; height: 43px}
#main_operpro .contop_area .btn_more {top:14px; right:0; left:inherit}
.operpro_box h3 {font-size:1.231em}
.operpro_box h3 a {padding:17px 10px}

#main_operpro .conbtn_area .btn_arrow {top:280px; width:100%}
#main_operpro .conbtn_area .btn_arrow li {float:inherit; position:absolute; top:-38px}
#main_operpro .conbtn_area .btn_arrow li button {width:38px; height:38px}
#main_operpro .conbtn_area .btn_arrow li.leftarr {left:10px}
#main_operpro .conbtn_area .btn_arrow li.rightarr {right:10px}

.operpro_box {padding:80px 50px 0}
.oper_cate {width:57px; height:45px; padding:6px 10px; font-size:1.077em}
.oper_info .btn_oper  {font-size:1.154em}
.operinfo_tit {font-size:1.385em; color:#000}

/* 알림마당 */
#main_rptpro h3.contop_tit {text-align: center; height: 43px}
#main_rptpro .contop_area .btn_more {top: 10px; right:0; left:inherit}
.rptpro_box h3 {font-size:1.231em}

#main_rptpro .conbtn_area .btn_arrow {top:220px; width:100%}
#main_rptpro .conbtn_area .btn_arrow li {float:inherit; position:absolute; top:-119px}
#main_rptpro .conbtn_area .btn_arrow li button {width:38px; height:38px}
#main_rptpro .conbtn_area .btn_arrow li.leftarr {left:-50px}
#main_rptpro .conbtn_area .btn_arrow li.rightarr {right:-50px}
.rptpro_box {padding:85px 50px 0}
.rpt_cate {width:57px; height:45px; padding:6px 10px; font-size:1.077em}
.rpt_info .btn_rpt  {font-size:1.154em}
.rptinfo_tit {font-size:1.385em; color:#000}   


/* 예술마당 */
#main_artpro h3.contop_tit {text-align: center; height: 43px}
#main_artpro .contop_area .btn_more {top: 10px; right:0; left:inherit}
.artpro_box h3 {font-size:1.231em}

#main_artpro .conbtn_area .btn_arrow {top:220px; width:100%}
#main_artpro .conbtn_area .btn_arrow li {float:inherit; position:absolute; top:-119px}
#main_artpro .conbtn_area .btn_arrow li button {width:38px; height:38px}
#main_artpro .conbtn_area .btn_arrow li.leftarr {left:-50px}
#main_artpro .conbtn_area .btn_arrow li.rightarr {right:-50px}
.artpro_box {padding:85px 50px 0}
.art_cate {width:57px; height:45px; padding:6px 10px; font-size:1.077em}
.art_info .btn_art  {font-size:1.154em}
.artinfo_tit {font-size:1.385em; color:#000}  
}

/*********************************/
/*********** LOWSET FIX ***********/
/*********************************/
@media only screen and (min-width:1250px) {
/*Menu FIX*/
.top_bar_fix{position:absolute; top:0; left:0; width:100%; transition: 0.6s}
.fixed .mainheader_bg{background:none}
.fixed{position:fixed; width:100%; padding-left:0; margin-top:-37px}
.fixed .gnb_box{border-radius: 0; background:none; box-shadow:none}
.fixed ul.gnb_list{margin:0 auto; padding: 0}
}

/********* TABLET LAYOUT[중간사이즈 조정관련 시작] *********/
@media only screen and (min-width:1025px) {
}
@media only screen and (min-width:1025px) and (max-width:1250px) {
#mainheader{position: relative}
#mainheader .headerwrap{position: relative;margin: 0 auto}
#mainheader .headerwrap .header_top{position: absolute; top:0; left:0;}
#content{margin-top:-116px}
}
@media only screen and (min-width:1025px) and (max-width:1480px) {
#mainheader .gnb_box{width: 1300px; margin: 0 auto}
}

@media only screen and (max-width:600px) {
.contop_area h3 .contop_sub{display: none}
.contop_area h3.contop_tit{font-size: 20px}
.notice_box{padding: 30px 0 0 !important}
.contop_area h3.contop_tit{height: 30px}
.notice_box .btn_more,#main_operpro .contop_area .btn_more,#main_rptpro .btn_more,#main_artpro .btn_more{top: 0}
.conbtn_area .btn_arrow li{margin-left: 0}

/* notice */
.contop_area .noticetb .conmid_sub,.contop_area .noticetb::after{display: none}
.contop_area .noticetb ul{margin-left: 0}  

}

@media only screen and (max-width:520px) {
#quickmenu .quick_wrap .quick_btns{padding: 10px 0}
#quickmenu .quick_wrap .quick_btns li:nth-child(1) a,#quickmenu .quick_wrap .quick_btns li:nth-child(2) a,#quickmenu .quick_wrap .quick_btns li:nth-child(3) a{background-size: 20%}
#quickmenu .quick_wrap .quick_btns li a{height: 40px}
#quickmenu .quick_wrap .quick_btns li a span{height: 25px; top: 8px; padding: 2px 8px; line-height: 24px; font-size: 11px}

/* notice */
.noticetb .date{background: none}


}

@media only screen and (max-width:450px) {
/* 유튜브*/
.mov_area{width: 100%}
.btn_move a {padding-left:65px; background-size:48px auto}
.btn_move a span {width:40px; height:24px; line-height:24px; padding:0; font-size:0; background-size:11px auto; background-position:50% 50%}

}

/********* TABLET LAYOUT[중간사이즈 조정관련 끝] *********/

@keyframes effect{
0%,40%,100% {transform:translateY(0)}
20%,60% {transform:translateY(-5px)}
}
@keyframes effect2 {
0%,40%,100% {transform:translateY(0)}
20%,60% {transform:translateY(-3px)}
}
@keyframes shake {
0% {
transform: translateY(4px);
transform: translateY(4px);
transform: translateY(4px);
transform: translateY(4px);
transform: translateY(4px);
}
50% {
transform: translateY(-4px);
transform: translateY(-4px);
transform: translateY(-4px);
transform: translateY(-4px);
transform: translateY(-4px);
}
100% {
transform: translateY(4px);
transform: translateY(4px);
transform: translateY(4px);
transform: translateY(4px);
transform: translateY(4px);
}
}