@charset "utf-8"; .fadeIn{ animation:fadein 2s; -moz-animation:fadein 2s; /* Firefox */ -webkit-animation:fadein 2s; /* Safari and Chrome */ -o-animation:fadein 2s; /* Opera */ } @keyframes fadein{ from{opacity:0} to{opacity:1} } @-moz-keyframes fadein{ /* Firefox */ from{opacity:0} to{opacity:1} } @-webkit-keyframes fadein{ /* Safari and Chrome */ from{opacity:0} to{opacity:1} } @-o-keyframes fadein{ /* Opera */ from{opacity:0} to{opacity:1} } .fadeInUp{animation:fadeInUp 1s ease backwards} .fadeInUp1{animation:fadeInUp 1s ease backwards} .fadeInUp2{animation:fadeInUp 1.2s ease backwards} .fadeInUp3{animation:fadeInUp 1.4s ease backwards} .fadeInUp4{animation:fadeInUp 1.6s ease backwards} .fadeInUp5{animation:fadeInUp 1.8s ease backwards} .fadeInUp6{animation:fadeInUp 2s ease backwards} @keyframes fadeInUp{ 0%{transform:translate(0px, 100px);opacity:0} 100%{transform:translate(0px, 0);opacity:1} } .txtL{text-align:left} .txtR{text-align:right} .txtC{text-align:center} .bns_btn{margin-top:28px;text-align:center} .btn{display:inline-block;padding:10px 30px;line-height:normal;font-size:18px;font-family:'NotoSansKR';font-weight:400;border-radius:5px;text-align:center;transition:all .3s} .btn.type_blue{color:#fff;background:#0056aa;border:1px solid #0056aa} .btn.type_blue:hover{color:#0056aa;background:#fff} .btn.type_gray{color:#fff;background:#999;border:1px solid #999} .btn.type_gray:hover{color:#666;background:#fff} .btn.type_navy{color:#fff;background:#29376d;border:1px solid #29376d} .btn.type_navy:hover{color:#29376d;background:#fff} #location .utile_wrap{display:none} /*사업신청*/ .input_type_basic{padding:6px;border:1px solid #ddd} .bns_board_wrap{font-family:'NotoSansKR'} /*메인, 서브 사업안내 상태값*/ .state{font-size:16px;font-weight:400} .state.state_pre{color:#f15b5b} /*접수전*/ .state.state_now{color:#0085ff} /*접수중*/ .state.state_end{color:#a6acba} /*접수마감*/ /*진행중사업,나의사업관리-진행상태 상태값*/ .state_a{display:inline-block;width:64px;padding:0;color:#fff;font-size:15px;text-align:center} .state_a.state_non{background:#666;border:1px solid #666} /*미선정*/ .state_a.state_que{background:#2fa500;border:1px solid #2fa500} /*선정대기*/ .state_a.state_vie{background:#f15b5b;border:1px solid #f15b5b} /*마감임박*/ .state_a.state_now{background:#0085ff;border:1px solid #0085ff} /*진행중*/ .state_a.state_end{background:#333;border:1px solid #333} /*사업완료*/ /*진행중사업,나의사업관리-관리상태 상태값*/ .state_b{display:inline-block;width:64px;padding:0;font-size:15px;text-align:center} .state_b.state_non{color:#666;border:1px solid #666} /*요청없음*/ .state_b.state_que{color:#2fa500;border:1px solid #2fa500} /*수정요청, 교부요청, 정산요청*/ .state_b.state_vie{color:#f15b5b;border:1px solid #f15b5b} /*수정검토, 교부검토, 정산검토*/ .state_b.state_end{color:#0085ff;border:1px solid #0085ff} /*수정완료, 교부완료, 정산완료*/ /*사업신청-list-상단검색*/ .bns_search_box{padding:30px;color:#212121;background:#eff0f7;border-radius:10px} .bns_search_box .search_items{display:flex;align-items:center;margin-bottom:10px;padding:10px;background:#fff;border-radius:5px;height:auto} .bns_search_box .search_items .search_name{position:relative;width:143px;font-size:16px;font-weight:500;text-align:center} .bns_search_box .search_items .search_name:after{content:'';position:absolute;right:0;top:12px;width:1px;height:18px;background:#ddd} .bns_search_box .search_items .search_item{width:calc(100% - 143px);padding-left:40px;line-height:40px} .bns_search_box .search_items.sitems1 .search_item, .bns_search_box .search_items.sitems2 .search_item, .bns_search_box .search_items.sitems3 .search_item{display:flex;flex-wrap:wrap} .bns_search_box .search_items.sitems2 .search_item select{width:200px;height:36px} .bns_search_box .search_items.sitems3 .search_or div div{display:flex;flex-wrap:wrap} .bns_search_box .search_items .search_item label{margin:0 20px 0 5px;font-size:16px;font-weight:300} .bns_search_box .search_items.sitems4 input{line-height:normal} .bns_search_box .search_items.sitems5 input{width:100%;line-height:normal} .bns_search_box .search_items.sitems5 input#aiOtherDate{margin-top:10px} .bns_search_box .search_items.sitems6 .search_item{} .bns_search_box .search_items.sitems6 .search_item #aiZipCd{width:200px;border:1px solid #ddd;height: 36px;padding: 0 10px;margin-bottom: 2px;line-height: normal;} .bns_search_box .search_items.sitems6 .search_item .btn_post{height:36px;line-height:13px;border-radius:0} .bns_search_box .search_items.sitems6 .search_item #aiAddr{width:100%;border:1px solid #ddd;height: 36px;padding: 0 10px;margin-bottom: 2px;line-height: normal;} .bns_search_box .search_items.sitems6 .search_item #aiAddrDetail{width:100%;border:1px solid #ddd;height: 36px;padding: 0 10px;margin-bottom: 2px;line-height: normal;} .bns_search_box .search_items.sitems6 .search_item .event-map{width:100%;border:1px solid #ddd;height:400px;} .bns_search_box .search_items.sitems7 .search_item {display:flex;flex-wrap:wrap} .bns_search_box .search_items.sitems7 .search_item div:first-child{width:calc(100% - 93px);margin-right:10px} .bns_search_box .search_items.sitems7 input[type="text"]{width:100%;border:1px solid #ddd;height: 36px;padding: 0 10px;margin-bottom: 2px;line-height: normal} .xy-wrap{} .xy-wrap dt{line-height:47px;color:#666;display:inline-block;} .xy-wrap dd{line-height:40px;vertical-align:top;display:inline-block} .xy-wrap dd input{border:1px solid #ebebeb} .xy-wrap dl{display:inline-block} .bns_search_box .bns_btn .btn{width:calc(50% - 2px);max-width:220px;padding:10px 30px 10px 50px;} .bns_search_box .bns_btn .btn.type_blue{background:#0056aa url(/img/ko/sub/ico_search.svg) no-repeat left calc(50% - 24px) top 50% / 25px} .bns_search_box .bns_btn .btn.type_blue:hover{color:#0056aa;background:#fff url(/img/ko/sub/ico_search_on.svg) no-repeat left calc(50% - 24px) top 50% / 25px} .bns_search_box .bns_btn .btn.type_navy{background:#29376d url(/img/ko/sub/ico_reset.svg) no-repeat left calc(50% - 35px) top 50% / 26px} .bns_search_box .bns_btn .btn.type_navy:hover{color:#29376d;background:#fff url(/img/ko/sub/ico_reset_on.svg) no-repeat left calc(50% - 35px) top 50% / 26px} .registration_btn{text-align:center;margin-top:30px} .registration_btn .btn{width:calc(50% - 2px);max-width:220px;padding:10px 30px 10px 30px;} .registration_btn .btn.type_blue{background:#0056aa} .registration_btn .btn.type_blue:hover{color:#0056aa;background:#fff} .registration_btn .btn.type_gray{background:#888} .registration_btn .btn.type_gray:hover{color:#888;background:#fff} input::placeholder {opacity: 0.5;} .search_items input[type=file]{border:1px solid #ebebeb;line-height:36px;padding:0 3px;min-height:36px} .search_items .more-file input[type=button]{width: 36px!important;height: 36px;background: black;color: #fff;vertical-align: top;margin-top: 1px;} @media only screen and (max-width:910px){ } @media only screen and (max-width:900px){ .xy-wrap dl{display:block} select#aiOperStHr,select#aiOperStMin,select#aiOperEdHr,select#aiOperEdMin{min-width:50px} } @media only screen and (max-width:800px){ .bns_search_box .search_items .search_name{width:123px} .bns_search_box .search_items .search_item{width:calc(100% - 123px)} .bns_search_box .search_items input::placeholder{font-size:12px} } @media only screen and (max-width:650px){ .bns_search_box .search_items.sitems6 .search_item #aiZipCd{width:calc(100% - 105px)} .bns_search_box .search_items.sitems6 .search_item .btn_post{width:100px;padding:0;text-align:center;font-size:14px} } @media only screen and (max-width:580px){ input[type="date"]{width:100%} .bns_search_box .search_items.sitems4 input{width:calc(48% - 8px)} } @media only screen and (max-width:505px){ .bns_search_box{padding:25px} .bns_search_box .search_items{flex-wrap:wrap;padding:0;background:none} .bns_search_box .search_items .search_name{width:100%;margin-bottom:5px;text-align:left} .bns_search_box .search_items .search_name:after{display:none} .bns_search_box .search_items .search_item{width:100%;padding:10px;background:#fff;border-radius:5px;line-height:normal} .bns_search_box .bns_btn .btn{font-size:16px} .bns_search_box .bns_btn .btn.type_blue{background:#0056aa url(/img/ko/sub/ico_search.svg) no-repeat left calc(50% - 24px) top 50% / 20px} .bns_search_box .bns_btn .btn.type_gray{background: #666 url(/img/ko/sub/ico_reset.svg) no-repeat left calc(50% - 30px) top 50% / 21px;} } @media only screen and (max-width:450px){ .bns_search_box .search_items input::placeholder{font-size:10px;opacity: 0.7;} select#aiOperStHr,select#aiOperStMin,select#aiOperEdHr,select#aiOperEdMin{min-width:20px;width:50px;font-size:12px;} } @media only screen and (max-width:390px){ .bns_search_box .search_items input::placeholder{font-size:8px;opacity: 0.8;} .bns_search_box .search_items.time .search_item{font-size:10px} } @media only screen and (max-width:369px){ .bns_search_box .search_items.sitems4 input{width:100%} .bns_search_box .search_items .search_item{text-align:center} } /*사업신청-list-하단목록*/ .bns_list{display:flex;flex-wrap:wrap} .bns_list .bns_item{width:calc(25% - 18px);padding:25px;margin-right:24px;margin-bottom:20px;background:#fff;border:1px solid #ddd;border-radius:5px;cursor:pointer;transition:all .3s} .bns_list .bns_item:hover{border:1px solid #0056aa} .bns_list .bns_item_nodata{width:100%;padding:25px;border:1px solid #ddd;border-radius:5px} .bns_list .bns_item:nth-child(4n){margin-right:0} .bns_list .bns_item .bi_top{margin-top:20px} .bns_list .bns_item .bi_top span{display:inline-block;height:26px;line-height:26px;padding:0 8px;font-size:15px;border-radius:3px} .bns_list .bns_item .bi_img img{width:100%;height:254px} /*.bns_list .bns_item .bi_top .type1{color:#1103a6;background:#dce1ff} .bns_list .bns_item .bi_top .type2{color:#9d5929;background:#fbeee3}*/ .type1{color:#fff!important} .type1.type_call{background:#056152 url(/img/artinfo/common/icon_call.png) 16px 13px no-repeat;background-size:14px;padding:10px 20px 10px 34px!important;color:#fff;height:40px!important;line-height:20px!important;border-radius:20px;} .type1.type_online{background:#22375f url(/img/artinfo/common/icon_online.png) 16px 13px no-repeat;background-size:14px;padding:10px 16px 10px 34px!important;color:#fff;height:40px!important;line-height:20px!important;border-radius:20px;} .type1.type_link{background:#000 url(/img/artinfo/common/icon_link.png) 16px 13px no-repeat;background-size:14px;padding:10px 16px 10px 34px!important;color:#fff;height:40px!important;line-height:20px!important;border-radius:20px;} .bns_list .bns_item .bi_title{font-family: 'SCDream';height:56px;margin:20px 0;color:#000;font-size:20px;font-weight:400;line-height:28px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .bns_list .bns_item .bi_date{padding-top:20px;margin-top:15px;font-size:15px;font-weight:300;border-top:1px solid #ebe9e8;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} .bns_list .bns_item .bi_date span{letter-spacing:-0.04rem} .bns_list .bns_item .bi_date .tit{margin-right:15px;font-weight:400} .bns_list .bns_item .bi_contact{padding-top:20px;margin-top:15px;font-size:15px;font-weight:300;border-top:1px solid #ebe9e8} .bns_list .bns_item .bi_contact span{letter-spacing:-0.04rem} .bns_list .bns_item .bi_contact .tit{margin-right:15px;font-weight:400} @media only screen and (max-width:1279px){ .bns_list .bns_item{width:calc(33.5% - 18px)} .bns_list .bns_item:nth-child(3n){margin-right:0} .bns_list .bns_item:nth-child(4n){margin-right:24px} } @media only screen and (max-width:955px){ .bns_list .bns_item{width:calc(50% - 12px)} .bns_list .bns_item:nth-child(2n){margin-right:0} .bns_list .bns_item:nth-child(3){margin-right:24px} .bns_list .bns_item:nth-child(9){margin-right:24px} } @media only screen and (max-width:645px){ .bns_list .bns_item{width:100%;padding:25px 25px 15px;margin-right:0} .bns_list .bns_item:nth-child(3n){margin-right:0} .bns_list .bns_item:nth-child(3){margin-right:0px} .bns_list .bns_item:nth-child(9){margin-right:0px} .bns_list .bns_item .bi_title{height:auto} .bns_list .bns_item .bi_date{padding-top:12px} } /*사업신청-view*/ .bns_view{} .bns_view_box{padding:22px 30px 30px;color:#212121;background:#eff0f7;border-radius:10px} .bns_view_box .view_titlebox h3{padding-bottom:20px;color:#0056aa;font-size:20px;text-align:center;line-height:normal} .bns_view_box .view_info{} .bns_view_box .view_info .view_items{display:flex;align-items:center;flex-wrap:wrap;margin-bottom:10px;padding:10px 10px 10px 0;background:#fff;border-radius:5px} .bns_view_box .view_info .view_items.vitems7{margin-bottom:0} .bns_view_box .view_info .view_items .view_name{position:relative;width:143px;font-size:16px;font-weight:500;text-align:center} .bns_view_box .view_info .view_items .view_name:after{content:'';position:absolute;right:0;top:4px;width:1px;height:18px;background:#ddd} .bns_view_box .view_info .view_items .view_item{width:calc(100% - 183px);padding-left:40px;line-height:normal} .bns_view_cont{padding:30px;margin-top:10px;color:#212121;border:1px solid #dbdde9;border-radius:10px} @media only screen and (max-width:800px){ .bns_view_box{padding:22px 25px 25px} .bns_view_box .view_info .view_items .view_name{width:90px} .bns_view_box .view_info .view_items .view_item{width:calc(100% - 90px);padding-left:20px} } @media only screen and (max-width:380px){ .bns_view_box{padding:22px 10px 10px} } /*사업신청-write-단계별*/ .bns_step_box{} .bns_step_box .title_box{padding-top:27px;border-top:2px solid #eff0f7;border-radius:20px 20px 0 0} .bns_step_box .title_box h3{margin-bottom:30px;color:#000;font-size:30px;font-weight:500;text-align:center;line-height:normal} .bns_step_box .step_info{display:flex;justify-content:space-between;padding:24px 25px;margin-bottom:30px;background:#eff0f7;border:1px solid #eff0f7;border-radius:30px} .bns_step_box .step_info .step_item{position:relative;width:calc(25% - 40px);padding:18px 0 14px;background:#fff;border:2px solid #fff;border-radius:50px;text-align:center} .bns_step_box .step_info .step_item .step_title{color:#0056aa;font-size:16px;font-family:'gmarket';font-weight:500} .bns_step_box .step_info .step_item .step_msg{color:#b5b6bf;font-size:22px;font-family:'sebang';font-weight:400} .bns_step_box .step_info .step_item.on{border:2px solid #0056aa} .bns_step_box .step_info .step_item.on .step_msg{color:#000} .bns_step_box .step_info .step_item.step04.on{} .bns_step_box .step_info .step_item.step04.on .step_title{} .bns_step_box .step_info .step_item.step04.on .step_msg{} .bns_step_box .step_info .step_item:after{content:'';position:absolute;right:-55px;top:50%;width:53px;height:1px;background:#d1d3da} .bns_step_box .step_info .step_item.step04:after{display:none} @media only screen and (max-width:1023px){ .bns_step_box .step_info .step_item{width:calc(25% - 15px)} .bns_step_box .step_info .step_item .step_msg{font-size:18px} } @media only screen and (max-width:767px){ .bns_step_box .title_box h3{font-size:26px} .bns_step_box .step_info{padding:13px} .bns_step_box .step_info .step_item{width:calc(25% - 10px);padding:10px 0 6px;border-radius:20px} .bns_step_box .step_info .step_item .step_msg{margin-top:5px;line-height:20px} .bns_step_box .step_info .step_item .step_msg span{display:block} } @media only screen and (max-width:520px){ .bns_step_box .step_info .step_item .step_msg{margin-top:0;font-size:15px} } .bns_step_box .step_border{position:relative;padding:25px 0 17px;margin-bottom:30px;border:1px solid #d1d3da;border-radius:30px} .bns_view .step_border{border-radius:10px} .bns_step_box .agree_item.step_border{padding:25px 0 0} .bns_step_box h3{padding:0 25px;margin-bottom:15px;color:#000;font-weight:500;font-size:26px} .bns_step_box .step_border h4{padding:0 25px;margin-bottom:15px;color:#000;font-weight:500;font-size:20px} .bns_step_box .step_border > div{padding:0 25px} .bns_step_box .step_border .agree_info{height:300px;overflow-y:scroll} .bns_step_box .step_border .agree_info::-webkit-scrollbar{width:7px;height:7px} .bns_step_box .step_border .agree_info::-webkit-scrollbar-thumb{background-color:rgba(92,108,254,.4);border-radius:20px} .bns_step_box .step_border .agree_info::-webkit-scrollbar-track{background-color:rgba(92,108,254,.1);border-radius:20px} .bns_step_box .step_border h5{margin-bottom:10px;color:#000;font-weight:400;font-size:18px} .bns_step_box .step_border p{margin:10px 0;color:#555;font-weight:300;font-size:16px;line-height:27px} .bns_step_box .step_border .agree_list_type1 li{color:#777;font-weight:300;font-size:16px;line-height:27px} .bns_step_box .step_border .agree_list_type2{margin-left:17px} .bns_step_box .step_border .agree_list_type2 li{position:relative;padding-left:13px} .bns_step_box .step_border .agree_list_type2 li:before{content:'';position:absolute;left:0;top:13px;width:4px;height:1px;background:#777} .bns_step_box .step_border .agree_check{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;padding:20px 10px;margin-top:25px;background:#eff0f7;border-radius:0 0 30px 30px} .bns_view .step_border .agree_check{border-radius:0 0 10px 10px} .bns_step_box .step_border .agree_check .check_msg{margin-right:10px;color:#0056aa;font-weight:500;font-size:18px} .bns_step_box .step_border .agree_check .check_box{display:flex} .bns_step_box .step_border .agree_check .check_box > div{position:relative;margin-left:5px} .bns_step_box .step_border .agree_check .check_box input{position:absolute;left:9px;top:8px} .bns_step_box .step_border .agree_check .check_box label{width:100%;padding:2px 10px 2px 25px;margin:0;color:#888;font-weight:500;font-size:16px;background:#cbcfd3;border-radius:30px} .bns_step_box .step_border .agree_check .check_box input:checked + label{color:#fff;background:#0056aa} .bns_step_box .agree_item_all{display:flex;justify-content:center;flex-wrap:wrap} .bns_step_box .agree_item_all .check_msg{color:#000;font-size:20px} .bns_step_box .agree_item_all .check_box{margin-left:10px} .bns_step_box .agree_item_all .check_box input{} .bns_step_box .agree_item_all .check_box label{color:#000;font-size:20px;vertical-align:middle} .bns_step_box .request{border:2px dotted #000} .bns_step_box .request h4{color:#ff6e6e} .bns_step_box .request > div > div{padding:15px;color:#000;background:#eff0f7;border-radius:10px} @media only screen and (max-width:767px){ .bns_step_box .step_border{padding:20px 0 12px} .bns_step_box .step_border > div{padding:0 18px} .bns_step_box h3{padding:0 20px;font-size:22px} .bns_step_box .step_border h4{padding:0 18px;font-size:18px} .bns_step_box .step_border h5{font-size:17px} .bns_step_box .step_border .agree_info{padding:0 18px} .bns_step_box .step_border .agree_check .check_msg{width:100%;margin-bottom:10px;text-align:center} .bns_step_box .step_border .agree_check .check_box{width:100%;justify-content:center} .bns_step_box .agree_item_all .check_msg, .bns_step_box .agree_item_all .check_box label{font-size:18px} } @media only screen and (max-width:520px){ .bns_step_box .step_border > div{padding:0 10px} } .bns_step_box .step_border dl{display:flex;flex-wrap:wrap;font-size:16px;font-weight:300} .bns_step_box .step_border dl dt{width:120px;height:40px;line-height:37px;margin-right:15px;margin-bottom:10px;color:#000;background:#f7efef;text-align:center;border-radius:30px} .mypage .bns_step_box .step_border dl dt{background:#eff0f7} .bns_step_box .step_border dl dd{width:calc(50% - 135px);color:#555;line-height:37px} .bns_step_box .step_border .w100per dl dd{width:calc(100% - 135px)} .bns_step_box .step_border dl dd input{width:30%;height:40px;padding:0 10px;margin-bottom:2px;background:#fafafa;line-height:normal} .bns_step_box .step_border dl dd input.btn.type_navy{height:40px;background:#29376d} .bns_step_box .step_border dl dd input.btn.type_navy:hover{background:#fff} .bns_step_box .step_border dl dd input.group_name, .bns_step_box .step_border dl dd input.group_owner, .bns_step_box .step_border dl dd input#cuName, .bns_step_box .step_border dl dd input[name=cuPeriodStart], .bns_step_box .step_border dl dd input[name=cuPeriodEnd], .bns_step_box .step_border dl dd input[name=cuCost], .bns_step_box .step_border dl dd input[name=grName], .bns_step_box .step_border dl dd input[name=grPeriodStart], .bns_step_box .step_border dl dd input[name=grPeriodEnd], .bns_step_box .step_border dl dd input[name=grCost], .bns_step_box .step_border dl dd input[name=grSubsidy], .bns_step_box .step_border dl dd input[name=seExpSelf], .bns_step_box .step_border dl dd input[name=seExpSubsidy], .bns_step_box .step_border dl dd input[name=prPrintDate], .bns_step_box .step_border dl dd input[name=prGroupRegDate], .bns_step_box .step_border dl dd input[name=loZipcode], .bns_step_box .step_border dl dd input[name=loAddr], .bns_step_box .step_border dl dd input[name=loAddr2], .bns_step_box .step_border dl dd input[name=loName], .join_wrap .step_border .member_box dl dd input[type=password], .join_wrap .step_border .member_box dl dd input[type=date], .join_wrap .step_border .member_box dl dd input[name=zipCd], .join_wrap .step_border .member_box dl dd input[name=addr1], .join_wrap .step_border .member_box dl dd input[name=addr2], .join_wrap .step_border .member_box dl dd input[name=emailId], .join_wrap .step_border .member_box dl dd input[name=emailAddr], .join_wrap .step_border .member_box dl dd input[name=hp2], .join_wrap .step_border .member_box dl dd input[name=hp3]{background:#fff;border:1px solid #ccc} .bns_step_box .step_border dl dd input.group_name, .bns_step_box .step_border dl dd input.group_owner, .bns_step_box .step_border dl dd input#addr1, .bns_step_box .step_border dl dd input#addr2, .bns_step_box .step_border dl dd input[name=userName], .bns_step_box .step_border dl dd input[name=userBirth], .bns_step_box .step_border dl dd input#cuName, .bns_step_box .step_border dl dd input#prCost, .bns_step_box .step_border dl dd input#loName, .bns_step_box .step_border dl dd input#loAddr, .bns_step_box .step_border dl dd input#loAddr2, .bns_step_box .step_border .app_file dl dd input[type=file]{width:91.8%} .bns_step_box .step_border dl dd input[name=emailId], .bns_step_box .step_border dl dd input[name=emailAddr], .bns_step_box .step_border dl dd input#prPrintDate, .bns_step_box .step_border dl dd input#prGroupRegDate, .bns_step_box .step_border dl dd input#cuCost{width:43%} .bns_step_box .step_border dl dd input[name=cuPeriodStart], .bns_step_box .step_border dl dd input[name=cuPeriodEnd], .bns_step_box .step_border dl dd input[name=prPeriodStart], .bns_step_box .step_border dl dd input[name=prPeriodEnd], .bns_step_box .step_border dl dd input#loZipcode{width:132px} .bns_step_box .step_border dl dd input.btn_loZip{width:132px} .bns_step_box .step_border dl dd input[type=radio], .bns_step_box .step_border dl dd input[type=checkbox]{width:auto;height:auto;background:none} .bns_step_box .step_border dl dd label{color:#000;font-size:17px;font-weight:400} .bns_step_box .step_border dl dd input::placeholder{color:#ccc} .bns_step_box .step_border dl dd input#arText{width:calc(100% - 232px);background:#fff;border:1px solid #ccc} .bns_step_box .step_border dl dd .dd_txt{display:inline-block;position:relative;padding-left:10px;margin-top:3px;color:#ae69f7;font-size:15px} .bns_step_box .step_border dl dd .dd_txt:before{content:'';position:absolute;left:0;top:0;color:#ae69f7} .bns_step_box .step_border .app_file dl dd input[type=file]{height:30px!important;background:none} .bns_step_box .step_border .app_file dd > div{} .bns_step_box .step_border .app_file dd > div > input[type=button]{padding:0;color:#fff;background:#666;border-radius:3px;text-align:center;line-height:20px} .bns_step_box .required{color:#ff0000;font-size:18px;font-weight:bold} .bns_step_box .app_msg{margin-bottom:10px} .bns_step_box .app_msg .btn.type_blue{padding:2px 20px 4px;font-size:16px} .bns_step_box .app_box table{width:100%;background:#eff0f7;border-radius:5px} .bns_step_box .app_box table tr{border-bottom:2px solid #fff} .bns_step_box .app_box table tbody tr:last-child{border-bottom:0} .bns_step_box .app_box table th{padding:10px 2px;color:#000} .bns_step_box .app_box table td{padding:10px 2px;font-weight:300;text-align:center} .bns_step_box .searchBoxLayer{display:none;position:absolute;left:25px;top:99px;width:250px;padding:0!important;font-size:16px;background-color:#fff;border:1px solid #0056aa;border-radius:5px;z-index:1;transition:all .3s} .bns_step_box .searchBoxLayer.searchBoxPart2{top:86px} .bns_step_box .searchBoxLayer .title{position:relative;padding:10px 0;color:#fff;font-size:18px;font-weight:400;background:#0056aa;text-align:center} .bns_step_box .searchBoxLayer .title input{display:none} .bns_step_box .searchBoxLayer .input{padding:5px} .bns_step_box .searchBoxLayer .input label{font-weight:400} .bns_step_box .searchBoxLayer .input input{width:100%;padding:8px 6px;background:#fff;border:1px solid #ccc} .bns_step_box .searchBoxLayer .btn_box{padding-bottom:5px;text-align:center} .bns_step_box .searchBoxLayer .btn_box input{width:calc(50% - 7px);padding:8px 0 10px} .bns_step_box .searchBoxLayer .btn_box input.btn_close{color:#fff;background:#555;border:1px solid #555;transition:all .3s} .bns_step_box .searchBoxLayer .btn_box input.btn_close:hover{color:#000;background:#fff} .bns_step_box .searchBoxLayer .btn_box input.btn_plus{color:#000;background:#fac300;border:1px solid #fac300;transition:all .3s} .bns_step_box .searchBoxLayer .btn_box input.btn_plus:hover{background:#fff} .bns_step_box .app_box table tbody td input[type=button]{padding:5px 6px 6px;color:#fff;font-size:14px;font-weight:300;background:#000;border-radius:3px} @media only screen and (max-width:1023px){ .bns_step_box .step_border dl dd{width:calc(100% - 135px)} .bns_step_box .step_border dl dd input{width:calc(33.334% - 3px)} .bns_step_box .step_border dl dd input.group_name, .bns_step_box .step_border dl dd input.group_owner, .bns_step_box .step_border dl dd input#addr1, .bns_step_box .step_border dl dd input#addr2, .bns_step_box .step_border dl dd input[name=userName], .bns_step_box .step_border dl dd input[name=userBirth], .bns_step_box .step_border dl dd input#cuName, .bns_step_box .step_border dl dd input#prCost, .bns_step_box .step_border dl dd input#cuCost, .bns_step_box .step_border dl dd input#loName, .bns_step_box .step_border dl dd input#loAddr, .bns_step_box .step_border dl dd input#loAddr2, .bns_step_box .step_border dl dd input#projectappFile1{width:100%} .bns_step_box .step_border dl dd input[name=emailId], .bns_step_box .step_border dl dd input[name=emailAddr]{width:calc(50% - 11px)} .bns_step_box .step_border dl dd input[name=cuPeriodStart], .bns_step_box .step_border dl dd input[name=cuPeriodEnd], .bns_step_box .step_border dl dd input[name=prPeriodStart], .bns_step_box .step_border dl dd input[name=prPeriodEnd]{width:calc(50% - 8px)} .bns_step_box .step_border dl dd .dd_txt{display:block;padding-left:20px} .bns_step_box .step_border dl dd .dd_txt:before{content:'└'} } @media only screen and (max-width:767px){ .bns_step_box .step_border dl dt{width:100px;letter-spacing:-1px} .bns_step_box .step_border dl dd{width:calc(100% - 115px)} .bns_step_box .step_border dl dd input#arText{width:100%} .bns_step_box .searchBoxLayer{left:18px;top:92px} } @media only screen and (max-width:520px){ .bns_step_box .step_border dl{font-size:14px} .bns_step_box .step_border dl dt{width:90px;margin-right:5px} .bns_step_box .step_border dl dd, .bns_step_box .step_border .w100per dl dd{width:calc(100% - 95px)} .bns_step_box .step_border dl dd input#prPrintDate{width:100%} .bns_step_box .step_border dl dd input#prGroupRegDate{width:100%} .bns_step_box .searchBoxLayer{left:10px;top:119px} } @media only screen and (max-width:390px){ .bns_step_box .step_border dl dd input#zipCd{width:calc(50% - 8px)} .bns_step_box .step_border dl dd input[name=emailId], .bns_step_box .step_border dl dd input[name=emailAddr], .bns_step_box .step_border dl dd input[name=cuPeriodStart], .bns_step_box .step_border dl dd input[name=cuPeriodEnd], .bns_step_box .step_border dl dd input[name=prPeriodStart], .bns_step_box .step_border dl dd input[name=prPeriodEnd]{width:calc(100% - 20px)} } .local_menu{display:flex;width:100%;max-width:1600px;margin:0 auto 35px} .local_menu .local_tab{width:25%;border:1px solid #ccc;border-left:0} .local_menu .local_tab.tab1{border-left:1px solid #ccc} .local_menu .local_tab.on{border:1px solid #323232} .local_menu .local_tab a{display:block;padding:12px 0;color:#323232;font-family:'sebang';font-size:20px;text-align:center;transition:all .3s;height:100%;align-content:center} .local_menu .local_tab.on a{color:#fff;background:#323232;} .local_menu .local_tab:hover{border:1px solid #323232} .local_menu .local_tab a:hover{color:#fff;background:#323232} @media (max-width: 1023px) { .local_menu{padding:0 30px} } @media only screen and (max-width:767px){ .local_menu{padding:0 20px;margin-bottom:25px} .local_menu .local_tab a{padding:12px 0 8px;font-size:17px} } @media only screen and (max-width:580px){ .local_menu{padding:0 10px} } @media only screen and (max-width:450px){ .local_menu .local_tab a{padding:10px 0 8px;font-size:15px} } @media only screen and (max-width:380px){ .local_menu .local_tab a{font-size:13px;letter-spacing:-1px} } .login_wrap{padding:150px 40px 50px} .login_wrap .login_box{width:100%;max-width:446px;margin:0 auto;font-family:'NotoSansKR'} .login_wrap .login_box h2{margin-bottom:70px;color:#000;font-family:'gmarket';font-weight:bold;font-size:40px;text-align:center} .login_wrap .login_box .login_input_box input{width:100%;height:60px;line-height:60px;padding-left:45px;margin-bottom:13px;color:#666;border:1px solid #e6e6e6;border-radius:4px;outline:0;transition:all .3s} .login_wrap .login_box .login_input_box input::placeholder{color:#bdbdbd;font-weight:300} .login_wrap .login_box .login_input_box input.id{background:url(/img/ko/main/ico_id.png) no-repeat 18px} .login_wrap .login_box .login_input_box input.pw{background:url(/img/ko/main/ico_pw.png) no-repeat 18px} .login_wrap .login_box p{margin-bottom:10px;font-size:18px} .login_wrap .login_box .login_btn_box input{width:100%;height:60px;line-height:60px;color:#fff;background:#0056aa;border:1px solid #0056aa;transition:all .3s} .login_wrap .login_box .login_btn_box input:hover{color:#0056aa;background:#fff} .login_wrap .login_box .etc_btn_box{position:relative;display:flex;flex-wrap:wrap;justify-content:center;margin-top:40px} .login_wrap .login_box .etc_btn_box input{position:relative;color:#abadae;font-weight:300;transition:all .3s} .login_wrap .login_box .etc_btn_box input:hover{color:#333} .login_wrap .login_box .etc_btn_box span{margin:0 16px;color:#b6b6b6;font-weight:200;font-size:10px;transition:all .3s} @media screen and (max-width:768px){ .login_wrap{padding:100px 40px 50px} } @media screen and (max-width:450px){ .login_wrap{padding:80px 0 30px} .login_wrap .login_box h2{margin-bottom:40px;font-size:34px} .login_wrap .login_box .etc_btn_box span{margin:0 10px} } .join_wrap{padding:60px 0 50px} .join_wrap .join_box h2{margin-bottom:50px;color:#000;font-family:'sebang';font-weight:400;font-size:40px;text-align:center} .join_wrap .step_info{position:relative;display:flex;justify-content:space-between;padding:24px 25px;margin-bottom:30px;background:#eff0f7;border:1px solid #eff0f7;border-radius:30px} .join_wrap .step_info:before{content:'';position:absolute;left:50px;top:50%;width:calc(100% - 100px);height:1px;background:#d1d3da} .join_wrap .step_info .step_item{position:relative;width:calc(25% - 40px);padding:18px 0 14px 93px;background:#fff;border:2px solid #fff;border-radius:50px;text-align:left} .join_wrap .step_info .step_item:after{content:'';position:absolute;left:29px} .join_wrap .step_info .step_item.step01:after{top:27%;width:38px;height:39px;background:url(/img/ko/common/ico_join01.png) no-repeat} .join_wrap .step_info .step_item.step02:after{top:30%;width:39px;height:38px;background:url(/img/ko/common/ico_join02.png) no-repeat} .join_wrap .step_info .step_item.step03:after{top:28%;width:34px;height:39px;background:url(/img/ko/common/ico_join03.png) no-repeat} .join_wrap .step_info .step_item.step04:after{top:32%;width:39px;height:34px;background:url(/img/ko/common/ico_join04.png) no-repeat} .join_wrap .step_info .step_item span{color:#0056aa;font-size:16px;font-family:'gmarket';font-weight:500;line-height:normal} .join_wrap .step_info .step_item p{color:#b5b6bf;font-size:22px;font-family:'sebang';font-weight:400} .join_wrap .step_info .step_item.on{padding:18px 0 14px 113px;border:2px solid #0056aa} .join_wrap .step_info .step_item.on:before{content:'';position:absolute;left:-1px;top:0;width:93px;height:100%;background:#0056aa;border-radius:50px 0 0 50px} .join_wrap .step_info .step_item.step01.on:after{background:url(/img/ko/common/ico_join01_on.png) no-repeat} .join_wrap .step_info .step_item.step02.on:after{background:url(/img/ko/common/ico_join02_on.png) no-repeat} .join_wrap .step_info .step_item.step03.on:after{background:url(/img/ko/common/ico_join03_on.png) no-repeat} .join_wrap .step_info .step_item.step04.on:after{background:url(/img/ko/common/ico_join04_on.png) no-repeat} .join_wrap .step_info .step_item.on p{color:#000} .join_wrap .step_border .member_box dl{margin-bottom:5px} .join_wrap .step_border .member_box dl dd{width:calc(100% - 135px)} .join_wrap .step_border .member_box dl.userinfo dt{width:150px} .join_wrap .step_border .member_box dl.userinfo dd{width:calc(100% - 165px)} .join_wrap .step_border .member_box dl.userinfo02 dt{width:185px} .join_wrap .step_border .member_box dl.userinfo02 dd{width:calc(100% - 200px)} .join_wrap .step_border .member_box dl.userinfo02 dd .btn.type_navy{padding:4px 13px;margin-left:10px} .join_wrap .step_border .member_box dl dd input[type=text], .join_wrap .step_border .member_box dl dd input[type=date], .join_wrap .step_border .member_box dl dd input[type=password], .join_wrap .step_border .member_box dl dd select{width:200px;height:40px;padding:0 10px;margin-bottom:2px;line-height:normal} .join_wrap .step_border .member_box dl dd input#addr1, .join_wrap .step_border .member_box dl dd input#addr2{width:100%} .join_wrap .step_border .member_box dl dd input[name=emailId], .join_wrap .step_border .member_box dl dd input[name=emailAddr]{width:200px} .join_wrap .step_border .member_box dd .btn_id, .join_wrap .step_border .member_box dd .btn_post{width:150px;height:40px;padding:0;line-height:40px;text-align:center} .join_wrap .join_step02{width:100%;max-width:700px;margin:0 auto} .join_wrap .join_step02 h3{position:relative;margin:0;padding-top:190px!important;text-align:center} .join_wrap .join_step02 h3:before{content:'';position:absolute;left:calc(50% - 75px);top:0;width:150px;height:174px;background:url(/img/ko/common/ico_ok.png) no-repeat center / 100%} .join_wrap .join_step02 > div{margin-top:20px} .join_wrap .join_step02 p{color:#000;font-size:16px;font-weight:300;text-align:center} .join_wrap .join_step02 ul{padding:15px 20px;margin-top:30px;background:#eff0f7;border-radius:10px} .join_wrap .join_step04{} .join_wrap .join_step04 > form > div{width:100%;max-width:550px;margin:60px auto;text-align:center} .join_wrap .join_step04 > div{width:100%;max-width:550px;margin:60px auto;text-align:center} .join_wrap .join_step04 .js_tit{position:relative;padding-top:70px;color:#0056aa;font-size:30px;font-weight:500} .join_wrap .join_step04 .js_tit:before{content:'';position:absolute;left:calc(50% - 28px);top:0;width:56px;height:56px;background:url(/img/ko/common/ico_end.png) no-repeat center / 100%} .join_wrap .join_step04 .js_txt{padding:10px 0 22px;color:#000;font-size:18px;font-weight:300} .join_wrap .join_step04 .js_info{padding:45px 70px 38px;background:#eff0f7;border-radius:10px} .join_wrap .join_step04 .js_info dl{display:flex;justify-content:center;padding:10px 0;margin-bottom:7px;font-size:18px;font-weight:300;background:#fff;border-radius:30px} .join_wrap .join_step04 .js_info dl dt{width:60px;color:#000;text-align:center} .join_wrap .join_step04 .js_info dl dd{width:125px;margin-left:10px;color:#ff717b;text-align:left} .join_wrap .join_step02.srchid p{font-size:18px} .join_wrap .join_step02.srchid p span{color:#f44336;letter-spacing:0.5px} @media only screen and (max-width:1279px){ .join_wrap .step_info .step_item{width:calc(25% - 15px)} .join_wrap .step_info .step_item p{font-size:18px} } @media only screen and (max-width:1100px){ .join_wrap .step_info .step_item.on{padding:18px 0 14px 93px} .join_wrap .step_info .step_item.on:before{width:80px} .join_wrap .step_info .step_item:after{left:25px} } @media only screen and (max-width:1023px){ .join_wrap{padding:40px 0 30px} .join_wrap .step_info .step_item, .join_wrap .step_info .step_item.on{padding:18px 0 14px;text-align:center} .join_wrap .step_info .step_item.on:before, .join_wrap .step_info .step_item:after{display:none} .join_wrap .step_border .member_box dl dd select#hp1, .join_wrap .step_border .member_box dl dd input#hp2, .join_wrap .step_border .member_box dl dd input#hp3{width:30%} .join_wrap .step_border.srchpwd dl dd input{width:100%} } @media only screen and (max-width:767px){ .join_wrap .title_box h3{font-size:26px} .join_wrap .step_info{padding:13px} .join_wrap .step_info .step_item{width:calc(25% - 10px);padding:14px 0;border-radius:20px} .join_wrap .step_info .step_item p{margin-top:5px;line-height:20px} .join_wrap .step_info .step_item.on{padding:14px 0} .join_wrap .step_border .member_box dd .btn_id, .join_wrap .step_border .member_box dd .btn_post{width:100px;font-size:15px} .join_wrap .step_border .member_box dl.userinfo02 dd .btn.type_navy{font-size:15px} } @media only screen and (max-width:520px){ .join_wrap .bns_step_box .step_info .step_item .step_msg{margin-top:0;font-size:15px} .join_wrap .step_border .member_box dl dd{width:calc(100% - 95px)} .join_wrap .step_border .member_box dl.userinfo dt{width:100px} .join_wrap .step_border .member_box dl.userinfo dd{width:calc(100% - 105px)} .join_wrap .step_border .member_box dl.userinfo02 dt{width:150px} .join_wrap .step_border .member_box dl.userinfo02 dd{width:calc(100% - 165px)} } @media screen and (max-width:450px){ .join_wrap .join_box h2{margin-bottom:40px;font-size:34px} .join_wrap .step_info .step_item span{font-size:14px} .join_wrap .join_step04 .js_info{padding:30px 30px 24px} .join_wrap .step_border .member_box dl.userinfo02 dt{margin-bottom:0} .join_wrap .step_border .member_box dl.userinfo02 dd{width:100%;margin-bottom:10px} } @media screen and (max-width:439px){ .join_wrap .step_border .member_box dl dd input#zipCd{width:calc(50% - 8px)} .join_wrap .step_border .member_box dl dd input[name=emailId], .join_wrap .step_border .member_box dl dd input[name=emailAddr]{width:90%} } @media screen and (max-width:365px){ .join_wrap .step_info .step_item p{font-size:16px} .join_wrap .step_info .step_item span{font-size:12px} } .bns_tab{display:flex;padding:35px 0 30px;justify-content:center} .bns_tab .tab_item{width:300px;height:60px;line-height:56px;margin:0 2px;color:#333;font-size:18px;text-align:center;border:2px solid #0056aa;border-radius:30px;cursor:pointer;transition:all .3s} .bns_tab .tab_item.on{color:#fff;font-size:20px;background:#0056aa} .bns_tab .tab_item:hover{color:#fff;background:#0056aa} @media only screen and (max-width:1023px){ .bns_tab .tab_item{width:200px} } @media only screen and (max-width:767px){ .bns_tab{justify-content:space-between;padding:25px 0 22px} .bns_tab .tab_item{width:calc(33% - 4px);height:50px;line-height:46px;margin:0;font-size:16px} .bns_tab .tab_item.on{font-size:16px} } .mypage.pw_check{width:100%;max-width:700px;margin:0 auto} .mypage.pw_check > p{padding-top:50px;margin-bottom:10px;color:#333;font-size:18px;font-family:'NotoSansKR'} .mypage.pw_check .form-signin{} .mypage.pw_check .form-signin form{display:flex} .mypage.pw_check .form-signin form .form-floating{width:calc(100% - 110px)} .mypage.pw_check .form-signin form .form-floating input{height:40px} .mypage.pw_check .form-signin form .form-floating .unmatch{position:relative;padding-left:30px;color:#ff0000;font-weight:300;font-family:'NotoSansKR';font-size:18px;line-height:25px} .mypage.pw_check .form-signin form .form-floating .unmatch:before{content:'!';position:absolute;left:0;top:0;width:25px;height:25px;color:#fff;font-weight:600;background:#ff0000;border-radius:50%;text-align:center} .userinfo_wrap{padding:0} .qna_wrap{font-family:'NotoSansKR'} .qna_wrap .qna_top{display:flex;flex-wrap:wrap;align-items:center;padding:28px 23px;background:#eff0f7;border-radius:10px} .qna_wrap .qna_top h3{position:relative;padding:0 50px 0 130px;color:#2b3e83;font-size:22px;font-weight:500} .qna_wrap .qna_top h3:before{content:'';position:absolute;left:0;top:-25px;width:109px;height:72px;background:url(/img/ko/sub/ico_qna.png) no-repeat left top / 100%} .qna_wrap .qna_top ul{} .qna_wrap .qna_top ul li{position:relative;padding-left:13px;margin-bottom:4px;color:#000;font-size:18px;font-weight:300} .qna_wrap .qna_top ul li:before{content:'';position:absolute;left:0;top:49%;width:4px;height:4px;background:#ff6251;border-radius:2px} .qna_wrap .qna_top ul li:last-child{margin-bottom:0} .qna_wrap .board_btn_box{padding-top:0} .qna_wrap h4{width:fit-content;margin-top:20px;padding:10px 20px;color:#000;font-size:18px;font-weight:500;background:#eff0f7} .qna_wrap .contbox{padding:0} .qna_wrap .contbox .viewbox{padding:20px;margin-bottom:10px;min-height:auto} .qna_wrap .contbox .viewbox .text_viewbox{font-size:16px;font-weight:300;line-height:26px} .qna_wrap .file_viewbox{margin-top:0!important} .qna_wrap .re_admin{} .qna_wrap .re_admin li{margin-top:10px;padding:20px;background:#f7efef;border:1px solid #333} .qna_wrap .re_admin li .re_name{color:#000;font-size:20px;font-weight:500} .qna_wrap .re_admin li .re_date{display:inline-block;margin-left:10px;color:#999;font-size:16px;font-weight:300} .qna_wrap .re_admin .re_cont{margin-top:6px} .qna_wrap .re_admin .re_cont p{color:#000;font-size:16px;font-weight:300} @media only screen and (max-width:985px){ .qna_wrap .qna_top{align-items:unset} .qna_wrap .qna_top h3{padding:0 50px 14px 85px;font-size:20px} .qna_wrap .qna_top h3:before{top:-10px;width:70px;height:48px} .qna_wrap .qna_top ul{margin-left:89px} .qna_wrap .qna_top ul li{padding-left:10px;margin-bottom:2px;font-size:16px} .qna_wrap .qna_top ul li:before{top:12px} } @media only screen and (max-width:600px){ .qna_wrap .module_view_box .view_titlebox dl{display:flex;flex-wrap:wrap} .qna_wrap .module_view_box .view_titlebox dl dt{float:none;width:60px;margin-right:0} .qna_wrap .module_view_box .view_titlebox dl dd{float:none;width:calc(50% - 60px);margin-right:0} .qna_wrap .module_view_box .view_titlebox dl.file_viewbox dd{width:calc(100% - 60px)} } @media only screen and (max-width:500px){ .qna_wrap .qna_top h3{padding:0 0 14px 71px} .qna_wrap .qna_top h3:before{width:59px;height:40px} .qna_wrap .qna_top ul{margin-left:0} } @media only screen and (max-width:375px){ .qna_wrap h4{margin-top:10px} } .faq_board_wrap{font-family:'NotoSansKR'} .faq_board_wrap .faq_list_box{border-top:1px solid #000} .faq_board_wrap .faq_list_box .list_box_wp{padding:0} .faq_board_wrap .faq-area{border-bottom:1px solid #bbb} .faq_board_wrap .faq-area .tab__button-section{} .faq_board_wrap .faq-area .tab__button-section .tab__button{position:relative;padding:30px 20px;font-size:22px;font-weight:300;cursor:pointer;transition:all .3s} .faq_board_wrap .faq-area .tab__button-section .tab__button:hover{background:#fcfcff} .faq_board_wrap .faq-area .tab__button-section .tab__button strong{} .faq_board_wrap .faq-area .tab__button-section .tab__button.tab__button--open{color:#000;font-weight:400;background:#fcfcff} .faq_board_wrap .faq-area .tab__cont-section{padding:20px;background:#fcfcff;border-top:1px solid #ebeef1} .faq_board_wrap .faq-area .tab__cont-section .tab__cont{position:relative;padding-left:40px} .faq_board_wrap .faq-area .tab__cont-section .tab__cont strong{display:block;position:absolute;left:0;top:0;width:30px;height:30px;line-height:30px;margin-right:10px;color:#fff;background:#0056aa;border-radius:30px;text-align:center} .faq_board_wrap .faq-area .tab__cont-section .tab__cont .pre__cont{font-size:16px} /* 사이트맵 - old */ .sitemap{position:relative;width:100%;margin-bottom:20px} .sitemap:after{display:block;visibility:hidden;clear:both;content:""} .sitemap *{margin:0;padding:0} .sitemap.type1{} .sitemap.type1.col3{} .sitemap.type1.col3 dl{width:33.33%} .sitemap.type1.col4 dl{width:25%} .sitemap.type1.col5 dl{width:20%} .sitemap.type1.col6 dl{width:16.66%} .sitemap.type1.col7 dl{width:14.28%} .sitemap.type1 dl{display:inline-block;float:left;margin-bottom:50px;padding:0 1%} .sitemap.type1 dl dt{margin:0 0 10px 0;padding:10px 15px;border-top:1px solid #111;border-bottom:1px solid #ccc;color:#111;font-size:16px;line-height:30px} .sitemap.type1 dl dd{padding:5px 15px} .sitemap.type1 dl dd b{display:block;line-height:0} .sitemap.type1 dl dd b a{display:block;position:relative;padding-left:10px;color:#333;font-size:14px;line-height:24px} .sitemap.type1 dl dd b a:hover, .sitemap.type1 dl dd b a:active, .sitemap.type1 dl dd b a:focus{text-decoration:underline} .sitemap.type1 dl dd b a:after{display:block;position:absolute;top:10px;left:0;width:4px;height:4px;background-color:#111;content:" "} .sitemap.type2{position:relative;overflow:hidden;border-top:2px solid #9aa2ac} .sitemap.type2 dl{position:relative;padding:23px 23px 23px 21%;overflow:hidden;border-bottom:1px solid #ddd} .sitemap.type2 dl:before{display:block;position:absolute;top:0;left:18%;width:1px;height:100%;content:"";background-color:#ddd} .sitemap.type2 dl:after{display:block;visibility:hidden;clear:both;content:""} .sitemap.type2 dt{position:absolute;top:25px;left:0;padding-left:15px;color:#333;width:15%;font-size:17px} .sitemap.type2 dt a{color:#000;font-size:18px;font-weight:bold;line-height:1.2} .sitemap.type2 dd{float:left;width:25%;padding:0 10px} .sitemap.type2 dd b{display:block;margin-bottom:5px;font-weight:normal} .sitemap.type2 dd b a{display:block;position:relative;padding-left:9px;color:#333;font-size:16px;font-weight:normal} .sitemap.type2 dd b a:after{display:block;position:absolute;top:8px;left:0;width:4px;height:4px;content:"";background-color:#9aa2ac} .sitemap.type2 dd ul{margin-left:8px} .sitemap.type2 dd ul li{display:block} .sitemap.type2 dd ul li a{display:block;position:relative;padding-left:11px;color:#777777;font-size:13px;line-height:20px} .sitemap.type2 dd ul li a:after{display:block;position:absolute;top:8px;left:0;width:5px;height:1px;content:"";background-color:#898989} @media only screen and (max-width:768px){ .sitemap.type2{border:none} .sitemap.type2 dl{padding:0;border-top:0} .sitemap.type2 dl:before{display:none} .sitemap.type2 dt{position:relative;top:0;margin-bottom:23px;padding:23px;border-top:2px solid #9aa2ac;border-bottom:1px solid #9aa2ac;color:#333;font-size:16px;width:100%} .sitemap.type2 dd{padding-bottom:23px} } @media only screen and (max-width:480px){ .sitemap.type2 dd{width:33.33%} .sitemap.type2 dd ul{display:none} } .sitemap.type2{border-color:#00a0a0} .sitemap.type2.clean_sitemap dd{width:33.33%} .sitemap.type2 dd ul li a i{font-size:11px;position:relative;top:-2px;color:#999} @media screen and (max-width:768px){ .sitemap.type2 dt{border-top:2px solid #00a0a0;border-bottom:1px solid #00a0a0} .sitemap.type2 dl{border-bottom:1px solid #00a0a0} } @media screen and (max-width:577px){ .sitemap.type2 dl:last-child dd{width:33.33%} } @media screen and (max-width:440px){ .sitemap.type2 dd,.sitemap.type2 dl:last-child dd{width:50%} } /*사업안내-old*/ .bsn_guide{display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:40px;font-family:'NotoSansKR'} .bsn_guide .bsn_guide_item{width:19%} .bsn_guide .bsn_guide_item.bns_guide1{width:25%} .bsn_guide .bsn_guide_item.bns_guide3{width:23%} .bsn_guide .bsn_guide_item .img{height:150px;text-align:center} .bsn_guide .bsn_guide_item .img img{height:100%} .bsn_guide .bsn_guide_item.bns_guide4 .img{padding-top:38px} .bsn_guide .bsn_guide_item .title{margin-top:35px;text-align:center} .bsn_guide .bsn_guide_item .title .s_tit{color:#b9b9bd;font-size:14px;font-weight:300} .bsn_guide .bsn_guide_item .title .l_tit{color:#000;font-size:26px;font-weight:500} .bsn_guide .bsn_guide_item .list{margin-top:35px} .bsn_guide .bsn_guide_item .list ul{} .bsn_guide .bsn_guide_item .list ul li{display:flex;justify-content:space-between;position:relative;padding-left:29px;margin-bottom:13px;color:#000;font-size:16px;font-weight:300;overflow:hidden} .bsn_guide .bsn_guide_item .list ul li:last-child{margin-bottom:0} .bsn_guide .bsn_guide_item .list ul li:before{position:absolute;left:0;top:3px;width:20px;height:20px;line-height:20px;padding:0;margin:0;color:#000;font-size:10px;font-weight:300;background:#ededf1;border-radius:30px;text-align:center} .bsn_guide .bsn_guide_item .list ul li:nth-child(1):before{content:'1'} .bsn_guide .bsn_guide_item .list ul li:nth-child(2):before{content:'2'} .bsn_guide .bsn_guide_item .list ul li:nth-child(3):before{content:'3'} .bsn_guide .bsn_guide_item .list ul li:nth-child(4):before{content:'4'} .bsn_guide .bsn_guide_item .list ul li:nth-child(5):before{content:'5'} .bsn_guide .bsn_guide_item .list ul li span{display:block;position:relative;background:#fff;letter-spacing:-0.5px} .bsn_guide .bsn_guide_item .list ul li span.list_name{} .bsn_guide .bsn_guide_item .list ul li span.list_name:after{content:'······································································································';position:absolute;top:5px;padding-left:7px;color:#bbb;font-size:10px;font-weight:200} .bsn_guide .bsn_guide_item .list ul li span.list_tel{padding:0 2px 0 7px;font-weight:200} @media screen and (max-width:1450px){ .bsn_guide{width:100%;max-width:900px;margin:0 auto} .bsn_guide .bsn_guide_item{width:46%;margin-top:40px} .bsn_guide .bsn_guide_item.bns_guide1, .bsn_guide .bsn_guide_item.bns_guide3{width:46%} .bsn_guide .bsn_guide_item .img{height:120px} } @media screen and (max-width:768px){ .bsn_guide .bsn_guide_item{display:grid;grid-template-columns:60px minmax(0, 1fr);gap:0 10px;align-items:center;justify-content:flex-start;width:100%;margin-top:0;margin-bottom:30px} .bsn_guide .bsn_guide_item.bns_guide1, .bsn_guide .bsn_guide_item.bns_guide3{width:100%} .bsn_guide .bsn_guide_item .title{margin-top:0;text-align:left} .bsn_guide .bsn_guide_item .title .l_tit{font-size:22px} .bsn_guide .bsn_guide_item .img{height:auto} .bsn_guide .bsn_guide_item .img img{height:auto} .bsn_guide .bsn_guide_item.bns_guide4 .img{padding-top:0} .bsn_guide .bsn_guide_item .list{display:inline-flex;flex-direction:column;grid-row:2;grid-column:2 / 3;width:100%;margin-top:3px;padding:0;margin:10px auto 0} } @media screen and (max-width:405px){ .bsn_guide .bsn_guide_item .list ul li{flex-wrap:wrap} .bsn_guide .bsn_guide_item .list ul li span.list_name{width:100%;font-weight:400} .bsn_guide .bsn_guide_item .list ul li span.list_tel{width:100%;padding-left:23px} .bsn_guide .bsn_guide_item .list ul li span.list_name:after{display:none} .bsn_guide .bsn_guide_item .list ul li span.list_tel:before{content:'···';position:absolute;left:0;top:5px;padding-left:2px;color:#bbb;font-size:10px;font-weight:200} } /*사업안내*/ .bsn_guide_table{font-family:'NotoSansKR'} .bsn_guide_table .bsn_guide_item .bsn_guide_tit{display:grid;grid-template-columns:60px minmax(0, 1fr);gap:0 10px;align-items:center;justify-content:flex-start;width:100%;margin-top:40px;margin-bottom:30px} .bsn_guide_table .bsn_guide_item .img{height:auto;text-align:center} .bsn_guide_table .bsn_guide_item .img img{height:auto} .bsn_guide_table .bsn_guide_item .title{margin-top:0;text-align:left} .bsn_guide_table .bsn_guide_item .title .s_tit{color:#b9b9bd;font-size:14px;font-weight:300} .bsn_guide_table .bsn_guide_item .title .l_tit{color:#000;font-size:26px;font-weight:500} .bsn_guide_table .bsn_guide_item .list{margin-top:10px} .bsn_guide_table .bsn_guide_item .list table{width:100%;border-top:2px solid #333} .bsn_guide_table .bsn_guide_item .list table th, .bsn_guide_table .bsn_guide_item .list table td{padding:5px;font-size:17px;font-weight:300;border-bottom:1px solid #ddd;text-align:center;vertical-align:middle} .bsn_guide_table .bsn_guide_item .list table th{padding:10px 5px;color:#000;font-size:18px;font-weight:500;background:#fafcff} .bsn_guide_table .bsn_guide_item .list table td .btn{width:90px;padding:5px 0;font-size:15px;text-align:center} .bsn_guide_table .bsn_guide_item .list table tbody tr td:nth-child(1){color:#000;font-weight:400} @media screen and (max-width:768px){ .bsn_guide_table .bsn_guide_item .list table th, .bsn_guide_table .bsn_guide_item .list table td{font-size:15px} .bsn_guide_table .bsn_guide_item .list table td .btn{width:65px;padding:3px 0;font-size:12px} } @media screen and (max-width:365px){ .bsn_guide_table .bsn_guide_item .list table th, .bsn_guide_table .bsn_guide_item .list table td{font-size:13px} .bsn_guide_table .bsn_guide_item .list table td .btn{width:60px;font-size:11px} } /*시스템소개*/ .intro_wrap{font-family:'NotoSansKR'} .intro_wrap .visual{position:relative;height:621px;background:url(/img/ko/sub/intro_top_bg.webp) no-repeat center top / cover} .intro_wrap .visual .visual_item{width:100%;max-width:700px;padding:200px 20px 0;margin:0 auto;text-align:center} .intro_wrap .visual .visual_item .title{margin-bottom:27px;color:#fff;font-size:46px;font-weight:500} .intro_wrap .visual .visual_item .cont{color:#fff;font-size:19px;font-weight:300} .intro_wrap .scroll-down{position:absolute;bottom:0;left:0;right:0;margin:0 auto;text-align:center;z-index:10} .intro_wrap .scroll-down p{position:relative;margin:0 auto 14px;font-size:18px;color:#fff;font-family:'gmarket'} .intro_wrap .scroll-down div{position:relative;margin:0 auto;width:1px;height:100px} .intro_wrap .scroll-down div::after, .scroll-down div::before{content:'';position:absolute;left:50%;bottom:0;width:1px;height:100%;margin-left:-0.5px;background:rgba(255,255,255,.2);-webkit-transition:.5s;transition:.5s} .intro_wrap .scroll-down div::after{will-change:transform;width:1px;background:#fff;animation-name:scrollDown;animation-duration:3s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.75,0,.173,1)} @keyframes scrollDown{ 0%{transform-origin:50% 100%;transform:scaleY(1)} 50%{transform-origin:50% 100%;transform:scaleY(0)} 50.001%{transform-origin:50% 0;transform:scaleY(0)} to{transform-origin:50% 0;transform:scaleY(1)} } @media screen and (max-width:767px){ .intro_wrap .visual{display:flex;align-items:center;height:400px} .intro_wrap .visual .visual_item{padding:0 20px} .intro_wrap .visual .visual_item .title{font-size:36px} .intro_wrap .visual .visual_item .cont{font-size:17px} .intro_wrap .scroll-down{display:none} } @media screen and (max-width:500px){ .intro_wrap .visual{height:300px} .intro_wrap .visual .visual_item .title{font-size:30px} } .intro_wrap .intro_guide{display:flex;flex-wrap:wrap;padding:60px 0} .intro_wrap .intro_guide .title_box{width:30%} .intro_wrap .intro_guide .title_box .desc{color:#000;font-size:20px;font-weight:300} .intro_wrap .intro_guide .title_box .tit{color:#000;font-size:50px;font-weight:500} .intro_wrap .intro_guide .cont_box{position:relative;width:70%} .intro_wrap .intro_guide .cont_box .step_item{display:flex;position:relative;align-items:center;flex-wrap:wrap;margin-top:24px;z-index:1} .intro_wrap .intro_guide .cont_box .step_item .label{position:relative;width:94px;height:38px;line-height:40px;padding:0;margin-right:33px;font-family:'gmarket';color:#fff;font-size:14px;font-weight:500;background:#0056aa;border-radius:30px} .intro_wrap .intro_guide .cont_box .step_item .label:before{content:'';position:absolute;left:calc(50% - 1px);top:38px;width:1px;height:80px;background:url(/img/ko/sub/ico_dotline.gif) repeat-y} .intro_wrap .intro_guide .cont_box .step_item.step4 .label:before{display:none} .intro_wrap .intro_guide .cont_box .step_item .step{width:calc(100% - 127px);padding:25px 30px 25px 55px;background:#fff;border:2px solid #0056aa;border-radius:50px} .intro_wrap .intro_guide .cont_box .step_item .step p{color:#0056aa;font-size:24px;font-weight:400} @media screen and (max-width:1150px){ .intro_wrap .intro_guide .title_box{width:20%} .intro_wrap .intro_guide .cont_box{width:80%} } @media screen and (max-width:1023px){ .intro_wrap .intro_guide .title_box{width:100%} .intro_wrap .intro_guide .cont_box{width:100%} .intro_wrap .intro_guide .cont_box .step_item .step{padding:20px 30px 20px 45px} .intro_wrap .intro_guide .cont_box .step_item .step p{font-size:20px} } @media screen and (max-width:767px){ .intro_wrap .intro_guide .title_box .desc{font-size:18px} .intro_wrap .intro_guide .title_box .tit{font-size:36px} .intro_wrap .intro_guide .cont_box:before{content:'';position:absolute;left:47px;top:30px;width:1px;height:calc(100% - 50px);background:url(/img/ko/sub/ico_dotline.gif) repeat-y} .intro_wrap .intro_guide .cont_box .step_item .label:before{display:none} .intro_wrap .intro_guide .cont_box .step_item .step{width:100%;padding:15px 20px 15px 30px;margin-top:10px;border-radius:15px} .intro_wrap .intro_guide .cont_box .step_item .step p{font-size:17px} } .intro_wrap .intro_tel{} .intro_wrap .intro_tel ul{display:flex;flex-wrap:wrap} .intro_wrap .intro_tel ul li{position:relative;width:50%;padding:40px 0;color:#fff;font-size:24px;font-weight:300;background:#0056aa;text-align:center} .intro_wrap .intro_tel ul li:after{content:'';position:absolute;right:0;top:0;width:1px;height:100%;background:rgba(255,255,255,1)} .intro_wrap .intro_tel ul li:last-child:after{display:none} .intro_wrap .intro_tel ul li strong{position:relative;font-weight:500} .intro_wrap .intro_tel ul li strong:before{content:'';position:absolute;left:-40px;top:4px;width:30px;height:30px;background-repeat:no-repeat;background-size:100%} .intro_wrap .intro_tel ul li:nth-child(1) strong:before{background-image:url(/img/ko/sub/ico_intro01.svg)} .intro_wrap .intro_tel ul li:nth-child(2) strong:before{background-image:url(/img/ko/sub/ico_intro02.svg)} @media screen and (max-width:1150px){ .intro_wrap .intro_tel ul li{font-size:20px} .intro_wrap .intro_tel ul li strong:before{top:2px} } @media screen and (max-width:1023px){ .intro_wrap .intro_tel ul li{width:100%;padding:40px 10px 40px 90px;text-align:left} .intro_wrap .intro_tel ul li:after{right:auto;left:0;top:auto;bottom:0;width:100%;height:1px} } @media screen and (max-width:500px){ .intro_wrap .intro_tel ul li{padding:30px 0 30px 65px;font-size:18px} .intro_wrap .intro_tel ul li strong:before{top:0} } @media screen and (max-width:410px){ .intro_wrap .intro_tel ul li{padding:20px 0;font-size:16px;text-align:center} .intro_wrap .intro_tel ul li strong:before{display:none} } /*이용약관,개인정보처리방침*/ .pipp_wrap{font-family:'NotoSansKR'} .pipp_wrap h3{margin:40px 0 10px;color:#000;font-weight:500;font-size:24px} .pipp_wrap h4{margin:20px 0 10px;color:#000;font-weight:400;font-size:20px} .pipp_wrap p{margin:10px 0;color:#333;font-weight:300;font-size:16px;line-height:27px} .pipp_wrap > ul{margin-bottom:15px} .pipp_wrap > ul > li{margin-bottom:2px;color:#333;font-weight:200;font-size:16px;line-height:27px} .pipp_wrap > ul > li > ul{margin-left:17px} .pipp_wrap > ul > li > ul > li{position:relative;padding-left:13px;color:#333} .pipp_wrap > ul > li > ul > li:before{content:'';position:absolute;left:0;top:13px;width:4px;height:1px;background:#777} /*이메일무단수집거부*/ .email_wrap{font-family:'NotoSansKR'} .email_wrap p{position:relative;padding:28px 23px 28px 138px;color:#000;font-size:18px;font-weight:300;background:#eff0f7;border-radius:10px} .email_wrap p:before{content:'';position:absolute;left:25px;top:29px;width:90px;height:91px;background:url(/img/ko/sub/ico_email.svg) no-repeat left top / 100%} .email_wrap h3{margin:20px 0 10px;color:#000;font-weight:400;font-size:20px} .email_wrap ul{} .email_wrap ul li{position:relative;padding-left:13px;margin-bottom:3px;color:#666;font-size:17px;font-weight:300} .email_wrap ul li:before{content:'';position:absolute;left:0;top:14px;width:4px;height:1px;background:#777} @media only screen and (max-width:500px){ .email_wrap p{padding:113px 18px 18px;font-size:16px} .email_wrap p:before{left:calc(50% - 35px);width:70px;height:71px} .email_wrap h3{font-size:18px} .email_wrap ul li{font-size:16px} } /*진행중사업 나의사업관리 테이블 반응형 */ table.ing_bns td span{display:block} @media only screen and (max-width:767px){ table.ing_bns, table.ing_bns thead, table.ing_bns th, table.ing_bns td, table.ing_bns tr{display:block} table.ing_bns{border-top:none!important} table.ing_bns thead tr{position:absolute;top:-9999px;left:-9999px} table.ing_bns tbody{display:flex;flex-wrap:wrap;justify-content:space-between} table.ing_bns tr{width:100% !important;margin:0 0 20px 0;border:1px solid #ccc;border-radius:10px;overflow:hidden} table.ing_bns td{position:relative;border-left:none !important;padding:4px 5px 4px 90px !important;font-size:14px;text-align:left !important;border-bottom:1px dotted #ccc} table.ing_bns td:last-child{border-bottom:0} table.ing_bns td > div{font-size:inherit} table.ing_bns td span{display:inline} table.ing_bns td:before{position:absolute;top:0;left:0;width:60px;height:100%;padding:0 10px;line-height:33px;white-space:nowrap;text-align:center;color:#333;font-size:14px;font-weight:400;background:#eff0f7} table.ing_bns td:nth-of-type(1):before{content:"번호"} table.ing_bns td:nth-of-type(2):before{content:"구분"} table.ing_bns td:nth-of-type(3):before{content:"사업명"} table.ing_bns td:nth-of-type(4):before{content:"사업기간"} table.ing_bns td:nth-of-type(5):before{content:"개인/단체"} table.ing_bns td:nth-of-type(6):before{content:"진행상태"} table.ing_bns td:nth-of-type(7):before{content:"사업관리"} table.ing_bns tr.no_data td:nth-of-type(1):before{display:none} table.ing_bns tr.no_data td{padding:5px!important;text-align:center!important} } /*청년포트폴리오_뷰페이지*/ .pf_view .pf_slider_area{padding:50px 0;} .pf_view .pf_slider_area .pf_container{position:relative;display:flex;display:-ms-flexbox;display:-webkit-flex;align-items:flex-start;justify-content:space-between} .pf_view .pf_slider_area .pf_photo{position:relative;width:57%;display:flex;display:-ms-flexbox;display:-webkit-flex;align-items:flex-start;flex-wrap:wrap} .pf_view .s_img{position:relative;padding-top:70%;overflow:hidden;z-index:2;border-radius:10px;height:100%;} .pf_view .s_img .img{position:absolute;top:0;left:0;right:0;bottom:0;overflow:visible !important} .pf_view .s_img .img img{position:absolute;top:0;left:50%;width:100%;transform:translateX(-50%)} .pf_view .pf_slider_area .pf_photo .view_img{position:relative;width:73%} .pf_view .pf_slider_area .pf_photo .view_img img{width:100%;border-radius:10px;height:100%;} .pf_view .pf_slider_area .pf_photo .view_img .list{height:100%;} .pf_view .pf_slider_area .pf_photo .view_img .list a{height:100%;} .pf_view .pf_slider_area .pf_photo .thumb_img{position:relative;width:23%;margin-left:auto} .pf_view .pf_slider_area .pf_photo .thumb_img .thumb_slider {height: 600px;} .pf_view .pf_slider_area .pf_photo .thumb_img .thumb_slider .swiper-wrapper{display:block} .pf_view .pf_slider_area .pf_photo .thumb_img .thumb_slider .swiper-wrapper .swiper-slide{width:auto!important;/*margin-right:auto!important;*/height:auto !important;} .pf_view .pf_slider_area .pf_photo .thumb_img .thumb_slider .list{display:block;height:auto;padding-bottom:12px} .pf_view .pf_slider_area .pf_photo .thumb_img .thumb_slider .swiper-slide-thumb-active .s_img::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border:3px solid #4dced9;box-sizing:border-box;-webkit-box-sizing:border-box;z-index:2;border-radius:10px} .pf_view .pf_slider_area .pf_photo .thumb_img .thumb_slider .s_img{padding-top:131px} .pf_view .pf_slider_area .pf_photo .thumb_img .thumb_btn_prev.swiper-hidden, .pf_view .pf_slider_area .pf_photo .thumb_img .thumb_btn_next.swiper-hidden{display:none} .pf_view .pf_slider_area .pf_photo .thumb_img .thumb_btn_prev, .pf_view .pf_slider_area .pf_photo .thumb_img .thumb_btn_next{display:block;position:absolute;left:48%;transform:translateX(-50%);width:30px;height:30px;background-repeat:no-repeat;background-size:100% auto;background-color:transparent;z-index:3} .pf_view .pf_slider_area .pf_photo .thumb_img .thumb_btn_prev{top:-23px;background-image:url(https://www.suncheon.go.kr/youth/common/img/contents/pf_icon_arow02.png);background-position:top 0 left 0} .pf_view .pf_slider_area .pf_photo .thumb_img .thumb_btn_next{bottom:-10px;background-image:url(https://www.suncheon.go.kr/youth/common/img/contents/pf_icon_arow02.png);background-position:top -30px left 0} .pf_view .pf_slider_area .pf_info{width:calc(40% - 15px)} .pf_view .pf_slider_area .pf_info h4{padding:10px 0 13px;color:#000;font-family:'SBAggro';font-size:26px;font-weight:600;border-bottom:2px solid #000;line-height:36px} .pf_view .pf_slider_area .pf_info ul{margin-top:26px} .pf_view .pf_slider_area .pf_info ul li{display:flex;margin-bottom:13px;align-items:flex-start;line-height:27px} .pf_view .pf_slider_area .pf_info ul li:last-child{margin-bottom:0} .pf_view .pf_slider_area .pf_info ul li strong{display:block;width:130px;color:#000;font-family:'SBAggro';font-size:16px;font-weight:500} .pf_view .pf_slider_area .pf_info ul li span{display:block;width:calc(100% - 130px);color:#000;font-family:'SBAggro';font-size:16px;font-weight:300} .pf_view .pf_slider_area .pf_info ul li span img{margin-right:6px} .pf_view .pf_slider_area .pf_info ul li.homepage-url{} .pf_view .pf_slider_area .pf_info ul li a.btn{margin:0 10px 0 0} .pf_view h3{padding:0;margin:50px 0 30px;color:#000;font-family:'SBAggro';font-size:28px;font-weight:300;background:none;text-align:center} .pf_view h3.loca-tit{text-align:left;font-size: 30px;color: #000;width: 100%;margin-bottom: 20px;font-family: 'SCDream';font-weight:500} .pf_view .youtube_area{position:relative;width:100%;height:auto;padding-top:56.3%;border-radius:10px;overflow:hidden} .pf_view .youtube_area iframe{z-index:1;top:0;left:0;position:absolute;width:100%;height:100%} .pf_view .pf_guide{display:flex;flex-wrap:wrap;justify-content:space-between} .pf_view .pf_guide > div{padding:38px 30px 33px 36px;border:1px solid #d8d9dc;border-radius:10px} .pf_view .pf_guide .wr1{width:100%} .pf_view .pf_guide .wr2{width:48.5%} .pf_view .pf_guide h4{width:180px;padding:10px 5px;color:#000;font-size:20px;font-weight:600;background:#f3d8da;border-radius:50px;text-align:center} .pf_view .pf_guide p{margin-left:10px;margin-top:17px;color:#555557;font-size:18px;font-weight:300;line-height:29px;width: 100%;white-space: pre-wrap;word-wrap: break-word;} .pf_view .pf_guide .wr2.price{margin-bottom:20px;background:#f3d8da} .pf_view .pf_guide .wr2.price h4{background:#fff} .pf_view .pf_guide .wr2.price p{color:#000;width: 100%;white-space: pre-wrap;word-wrap: break-word;} .pf_view .pf_guide .wr1.notice{margin-bottom:20px} .pf_view .pf_guide .wr1.hashtag{padding:10px 30px 10px 36px;background:#eee} .pf_view .pf_guide .wr1.hashtag p{margin-top:0;font-size:16px} @media all and (max-width:1024px){ .pf_view .pf_slider_area .pf_container{display:block;width:calc(100% - 60px)} .pf_view .pf_slider_area .pf_photo, .pf_view .pf_slider_area .pf_info{width:100%} } @media all and (max-width:800px){ .pf_view .pf_slider_area .pf_photo{display:block} .pf_view .pf_slider_area .pf_photo .view_img{width:100%} .pf_view .pf_slider_area .pf_photo .thumb_img{width:100%;margin-left:0;margin-top:10px;} .pf_view .pf_slider_area .pf_photo .thumb_img .thumb_slider{height:unset;} .pf_view .pf_slider_area .pf_photo .thumb_img .thumb_slider .swiper-wrapper{display:flex;flex-direction:row} .pf_view .pf_slider_area .pf_photo .thumb_img .thumb_slider .swiper-wrapper .swiper-slide{width:25%!important} .pf_view .pf_slider_area .pf_photo .thumb_img .thumb_btn_prev{left:-23px;top:36%;transform:rotate(-90deg)} .pf_view .pf_slider_area .pf_photo .thumb_img .thumb_btn_next{left:auto;right:-22px;bottom:auto;top:36%;transform:rotate(-90deg)} .pf_view .pf_slider_area .pf_info{margin-top:30px} .pf_view .pf_guide .wr2{width:100%} .pf_view .pf_guide .wr2.service:first-child{margin-bottom:20px} } .pf_container, .pf_container2{position:relative;max-width:1400px;margin:0 auto;padding:0} .pf_item_area{position:relative;margin-top:60px} .pf_item_area h3{padding:0;margin-bottom:35px;color:#3d3d3d;font-family:'SBAggro';font-size:36px;font-weight:500;background:none;text-align:center} .pf_item_area .item_list{overflow:hidden} .pf_item_area .item_list .item_wrap{display:flex;/* width:2000px */} .pf_item_area .item_list .item_wrap.more_list{flex-wrap:wrap;width:calc(100% - 20px);margin:0 auto} .pf_item_area .item_list .item_wrap.more_list .item_box{width:calc(25% - 18px);margin-bottom:25px} .pf_item_area .item_list .item_wrap.more_list .item_box:nth-child(4n){margin-right:0} .pf_item_area .item_list .item_box{width:303px;margin-right:23px;border:1px solid #ddd;border-radius:10px;overflow:hidden} .pf_item_area .item_list .item_box:last-child{margin-right:0} .pf_item_area .item_list .item_box a{display:block} .pf_item_area .item_list .item_box a .img{position:relative;padding-top:70%;overflow:hidden;z-index:2} .pf_item_area .item_list .item_box a .img div{position:absolute;top:0;left:0;right:0;bottom:0;overflow:visible !important} .pf_item_area .item_list .item_box a .img div img{position:absolute;top:0;left:50%;transform:translateX(-50%)} .pf_item_area .item_list .item_box a .img div{padding-top:72.36%;border-radius:3px} .pf_item_area .item_list .item_box a .img div img{left:50%;transform:translateX(-50%);margin-left:0!important;width:100%;height:100%;} .pf_item_area .item_list .item_box a .tit{position:relative;padding:25px 10px 0 18px;margin:0;color:#4dced9;font-family:'SBAggro';font-size:22px;font-weight:500} .pf_item_area .item_list .item_box a .txt{height:57px;padding:13px 10px 0 18px;margin-bottom:18px;color:#3d3d3d;font-size:17px;font-weight:300;line-height:22px;word-break:keep-all;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .pf_item_area .item_list .item_box a .price{padding:3px 10px;color:#000;font-size:20px;font-weight:500;background:#f2f2f2;text-align:right} .pf_item_area .item_list .item_box a .tit::before{content:'';position:absolute;bottom:-4px;left:18px;width:calc(100% - 36px);height:2px;background:#4dced9;opacity:0.5;border-radius:10px;display:block;-webkit-transform-origin:right top;-ms-transform-origin:right top;transform-origin:right top;-webkit-transform:scale(0, 1);-ms-transform:scale(0, 1);transform:scale(0, 1);-webkit-transition:transform 0.4s cubic-bezier(1, 0, 0, 1);transition:transform 0.4s cubic-bezier(1, 0, 0, 1)} .pf_item_area .item_list .item_box a:hover .tit::before{-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(1, 1);-ms-transform:scale(1, 1);transform:scale(1, 1)} .pf_item_area .control_box .btn_auto{display:flex;justify-content:space-between;position:absolute;left:0;top:0;width:80px} .pf_item_area .control_box .btn_auto a{display:block;width:36px;height:36px;border-radius:30px;text-indent:-9999px} .pf_item_area .control_box .btn_auto a.stop{background:#ddd url(https://www.suncheon.go.kr/youth/common/img/contents/pf_stop.png) no-repeat center} .pf_item_area .control_box .btn_auto a.play{background:#ddd url(https://www.suncheon.go.kr/youth/common/img/contents/pf_play.png) no-repeat center} .pf_item_area .control_box .btn_prev a{display:block;position:absolute;left:-37px;top:50%;width:22px;height:36px;background:url(https://www.suncheon.go.kr/youth/common/img/contents/pf_icon_arow.png) no-repeat;text-indent:-9999px} .pf_item_area .control_box .btn_next a{display:block;position:absolute;right:-37px;top:50%;width:22px;height:36px;background:url(https://www.suncheon.go.kr/youth/common/img/contents/pf_icon_arow.png) no-repeat;transform:rotate(180deg);text-indent:-9999px} .pf_item_area .btn_more{position:absolute;top:0;right:0;padding:10px 14px 10px 20px;color:#000;border-radius:30px;background:#ddd} .pf_item_area .btn_more span{} @media all and (max-width:1380px){ .pf_container{width:calc(100% - 80px)} } @media all and (max-width:1024px){ .pf_item_area .item_list .item_wrap.more_list .item_box{width:calc(33.333% - 16px)} .pf_item_area .item_list .item_wrap.more_list .item_box:nth-child(4n){margin-right:23px} .pf_item_area .item_list .item_wrap.more_list .item_box:nth-child(3n){margin-right:0} } @media all and (max-width:768px){ .pf_container{width:calc(100% - 40px)} .pf_item_area{margin:60px 30px 0} .pf_item_area h3{font-size:28px} .pf_item_area .item_list .item_wrap.more_list .item_box{width:calc(50% - 12px)} .pf_item_area .item_list .item_wrap.more_list .item_box:nth-child(3n){margin-right:23px} .pf_item_area .item_list .item_wrap.more_list .item_box:nth-child(2n){margin-right:0} } @media all and (max-width:500px){ .pf_item_area .btn_more{width:36px;height:36px;padding:0;font-size:20px;line-height:36px;text-align:center} .pf_item_area .btn_more span{display:none} } @media all and (max-width:430px){ .pf_item_area .item_list .item_wrap.more_list .item_box{width:100%} .pf_item_area .item_list .item_wrap.more_list .item_box:nth-child(1n){margin-right:0} } .maT-50{margin-top:-50px !important} .maT-45{margin-top:-45px !important} .maT-40{margin-top:-40px !important} .maT-35{margin-top:-35px !important} .maT-30{margin-top:-30px !important} .maT-25{margin-top:-25px !important} .maT-20{margin-top:-20px !important} .maT-15{margin-top:-15px !important} .maT-10{margin-top:-10px !important} .maT-5{margin-top:-5px !important} .maT0{margin-top:0 !important} .maT5{margin-top:5px !important} .maT10{margin-top:10px !important} .maT15{margin-top:15px !important} .maT20{margin-top:20px !important} .maT25{margin-top:25px !important} .maT30{margin-top:30px !important} .maT35{margin-top:35px !important} .maT40{margin-top:40px !important} .maT45{margin-top:45px !important} .maT50{margin-top:50px !important} .maT75{margin-top:75px !important} .maR-50{margin-right:-50px !important} .maR-45{margin-right:-45px !important} .maR-40{margin-right:-40px !important} .maR-35{margin-right:-35px !important} .maR-30{margin-right:-30px !important} .maR-25{margin-right:-25px !important} .maR-20{margin-right:-20px !important} .maR-15{margin-right:-15px !important} .maR-10{margin-right:-10px !important} .maR-5{margin-right:-5px !important} .maR0{margin-right:0 !important} .maR5{margin-right:5px !important} .maR10{margin-right:10px !important} .maR15{margin-right:15px !important} .maR20{margin-right:20px !important} .maR25{margin-right:25px !important} .maR30{margin-right:30px !important} .maR35{margin-right:35px !important} .maR40{margin-right:40px !important} .maR45{margin-right:45px !important} .maR50{margin-right:50px !important} .maB-50{margin-bottom:-50px !important} .maB-45{margin-bottom:-45px !important} .maB-40{margin-bottom:-40px !important} .maB-35{margin-bottom:-35px !important} .maB-30{margin-bottom:-30px !important} .maB-25{margin-bottom:-25px !important} .maB-20{margin-bottom:-20px !important} .maB-15{margin-bottom:-15px !important} .maB-10{margin-bottom:-10px !important} .maB-5{margin-bottom:-5px !important} .maB0{margin-bottom:0 !important} .maB5{margin-bottom:5px !important} .maB10{margin-bottom:10px !important} .maB15{margin-bottom:15px !important} .maB20{margin-bottom:20px !important} .maB25{margin-bottom:25px !important} .maB30{margin-bottom:30px !important} .maB35{margin-bottom:35px !important} .maB40{margin-bottom:40px !important} .maB45{margin-bottom:45px !important} .maB50{margin-bottom:50px !important} .maL-50{margin-left:-50px !important} .maL-45{margin-left:-45px !important} .maL-40{margin-left:-40px !important} .maL-35{margin-left:-35px !important} .maL-30{margin-left:-30px !important} .maL-25{margin-left:-25px !important} .maL-20{margin-left:-20px !important} .maL-15{margin-left:-15px !important} .maL-10{margin-left:-10px !important} .maL-5{margin-left:-5px !important} .maL0{margin-left:0 !important} .maL5{margin-left:5px !important} .maL10{margin-left:10px !important} .maL15{margin-left:15px !important} .maL20{margin-left:20px !important} .maL25{margin-left:25px !important/*margin-left:2.22%!important*/} .maL30{margin-left:30px !important} .maL35{margin-left:35px !important} .maL40{margin-left:40px !important} .maL45{margin-left:45px !important} .maL50{margin-left:50px !important} .maL55{margin-left:55px !important} .maL60{margin-left:60px !important} .maL65{margin-left:65px !important} .maL70{margin-left:70px !important} .maL75{margin-left:75px !important} .maL80{margin-left:80px !important} /* padding */ .paA0{padding:0 !important} .paA5{padding:5px !important} .paA10{padding:10px !important} .paA15{padding:15px !important} .paA20{padding:20px !important} .paT0{padding-top:0 !important} .paT5{padding-top:5px !important} .paT10{padding-top:10px !important} .paT15{padding-top:15px !important} .paT20{padding-top:20px !important} .paT25{padding-top:25px !important} .paT30{padding-top:30px !important} .paT35{padding-top:35px !important} .paT40{padding-top:40px !important} .paT45{padding-top:45px !important} .paT50{padding-top:50px !important} .paR0{padding-right:0 !important} .paR5{padding-right:5px !important} .paR10{padding-right:10px !important} .paR15{padding-right:15px !important} .paR20{padding-right:20px !important} .paR25{padding-right:25px !important} .paR30{padding-right:30px !important} .paR35{padding-right:35px !important} .paR40{padding-right:40px !important} .paR45{padding-right:45px !important} .paR50{padding-right:50px !important} .paB0{padding-bottom:0 !important} .paB5{padding-bottom:5px !important} .paB10{padding-bottom:10px !important} .paB15{padding-bottom:15px !important} .paB20{padding-bottom:20px !important} .paB25{padding-bottom:25px !important} .paB30{padding-bottom:30px !important} .paB35{padding-bottom:35px !important} .paB40{padding-bottom:40px !important} .paB45{padding-bottom:45px !important} .paB50{padding-bottom:50px !important} .paL0{padding-left:0 !important} .paL5{padding-left:5px !important} .paL10{padding-left:10px !important} .paL15{padding-left:15px !important} .paL20{padding-left:20px !important} .paL25{padding-left:25px !important} .paL30{padding-left:30px !important} .paL35{padding-left:35px !important} .paL40{padding-left:40px !important} .paL45{padding-left:45px !important} .paL50{padding-left:50px !important} /*text align*/ .txtL{text-align:left!important} .txtR{text-align:right!important} .txtC{text-align:center!important} .floatL {float:left !important} .floatN {float:none !important} .inlineB {display:inline-block} .bbsFile .file{padding:22px 35px; background:#f9f9f9;border-bottom:1px solid #d4d4d4} .bbsFile .file li{display:flex; align-items:center;} .bbsFile .file em{display:inline-block; position:relative; font-weight:500; font-size:15px; color:#222;} .bbsFile .file li > *:not(em){display:inline-block;margin-left:11px;font-weight:300;font-size:15px;color: #444;} .bbsFile .file li > a {position: relative;} .bbsFile .file li > a:after {content: "";width: 100%;height: 1px;background: #444;position: absolute;left: 0;bottom: 0;transition: all 0.3s ease 0s;opacity: 0;} .bbsFile .file li > a:hover:after {opacity: 1;} .bbsFile .file li:nth-child(1) ~ li{margin-top:7px;} .bbsFile .file em:before{content:""; display:block; position:relative; width:15px; height:18px; background:url('https://www.ssartpia.kr/images/board/icon_file.svg') no-repeat 50% 50%;} .bbsFile .file > ul{display:inline-block;} .bbsPager.admPager .inr_pager{display:flex; justify-content:space-between; width:100%;} .admPager_btn li a{display:block; width:88px; line-height:1; padding:14px 0;} .admPager_btn{display:flex;position: absolute;right: 0;top: 0;} .admPager_btn li:first-child{margin-right:6px;} .bbsControls{margin-top:40px; border-top:1px solid #222; border-bottom:1px solid #ddd;} .bbsControls ul li a{display:flex; align-items:center; padding:23px 0; letter-spacing:-0.025px;} .bbsControls ul li:first-child{border-bottom:1px solid #ddd;} .bbsControls ul li a em{position:relative; margin-right:20px; padding:0 40px; white-space:nowrap;} .bbsControls ul li a em::after{content:""; position:absolute; top:50%; right:0; width:1px; height:14px; margin-top:-7px; background:#ccc;} .bbsControls ul li a p{display:block; overflow:hidden; font-weight:300; color:#888; white-space:nowrap; transition:all 0.3s ease 0s; text-overflow:ellipsis;} .bbsControls ul li a:hover p{color:#333;} .view-cont-wrap{margin:30px 0} .root_daum_roughmap.root_daum_roughmap_landing{width:100%} .root_daum_roughmap.root_daum_roughmap_landing .wrap_map{height:500px} .root_daum_roughmap.root_daum_roughmap_landing .cont{display:none} .root_daum_roughmap.root_daum_roughmap_landing .wrap_map{width:100%} /*문화공간*/ .artSpaceInfo{background:#f9f9f9;border-top:2px solid #999;padding:48px 64px;} .artSpaceInfo h3{font-size:30px;color:#000;width:100%;margin-bottom:20px;font-family: 'SCDream';} .artSpaceInfo .row{border-bottom:1px solid #ebebeb;padding:10px 0;display:flex} .artSpaceInfo .row span{font-family: 'SCDream';font-weight:500;color:#000} .artSpaceInfo .row-first{border-top:1px solid #ebebeb} .artSpaceInfo .row .col-12{width:100%} .artSpaceInfo .row .col-6{width:50%;} .artSpaceInfo .row .spaceLabel{width:120px;color:#666;display:inline-block;font-family: 'SCDream';font-weight:400} .artSpaceInfo .row .spaceType{font-weight:600;color:#000;font-family: 'SCDream';} .artSpaceInfo .row .spaceCont{display:inline-block;} .artSpaceImageWrap{padding:48px 64px;background:#f9f9f9;border-top:2px solid #999;margin-top:30px} .artSpaceImage h3{font-size:30px;color:#000;width:100%;margin-bottom:20px;font-family: 'SCDream';} .artSpaceImageList{display:flex;justify-content:center;gap:20px;} .artSpaceImageList div img{width:100%;max-width:490px} .artSpaceImageList .artSpaceImageCont{} .artSpaceImageList .artSpaceImageCont img{} .artSpaceContent{padding:48px 64px;background:#f9f9f9;border-top:2px solid #999;margin-top:30px} .artSpaceContent h3{font-size:30px;color:#000;width:100%;margin-bottom:20px;font-family: 'SCDream';} .artSpaceMapWrap{padding:48px 64px;background:#f9f9f9;border-top:2px solid #999;margin-top:30px} .artSpaceMapWrap .artSpaceMap{} .artSpaceMapWrap .artSpaceMap h3{font-size:30px;color:#000;width:100%;margin-bottom:20px;font-family: 'SCDream';} @media all and (max-width:768px){ .artSpaceInfo{padding:30px 20px} .artSpaceInfo .row{display:block} .artSpaceInfo .row .col-6{width:100%;} .artSpaceContent{padding:30px 20px} .artSpaceImageWrap{padding:30px 20px} .artSpaceMapWrap{padding:30px 20px} } .heart-button {font-size: 20px;cursor: pointer;color: #ccc; /* 비어있는 하트 색상 */transition: color 0.3s ease;user-select: none;font-family: 'SCDream';z-index:1} .heart-button.liked {color: red; /* 찜 눌렀을 때 빨간 하트 */} .gray-box{background:#f8f8f8 url(/img/artinfo/common/bg_gray_box.png) right -10px top -10px no-repeat;border-radius:30px;padding:80px 100px} .white-box-sm{background:#fafafa;border:1px solid #ddd;/*border-radius:30px;*/padding:20px 50px;display:flex;justify-content:space-between;margin-bottom:20px} .white-box-sm h4{margin-top:20px} h3{font-size: 30px;color: #000;margin-bottom: 20px;font-family: 'SCDream';} h4{font-size: 28px;color: #000;margin-bottom: 20px;font-family: 'SCDream'} ul.list-dot{} ul.list-dot li{position:relative;color:#333;padding-left:10px;line-height:29px;word-break:keep-all} ul.list-dot li:before{content: "";position: absolute;width: 5px;height: 5px;background-color: #444;border-radius: 10px;top: 12px;left: 0;} .gray-box .box_info {font-weight: 600; font-size: 20px;color:#000;} .bg-green{background:#eeffeb;} .gray-box .box_msg {font-weight:400;font-size:18px} /*.gray-box .box_contact {margin-left: 30px; font-weight: bold; padding-bottom: 10px;} .gray-box .box_contact li { list-style:disc; }*/ .gray-box .box_down a { background-color:#000000; } .box_setup{font-family: 'NotoSansKR';} .search_items{display:flex;height: 60px;border-bottom: 1px dotted #666;padding: 10px 0;line-height: 40px;} .search_name{width:240px;display:block;font-size:16px;font-weight:400} .search_name .required{color:red;font-weight:600} .search_item{width:calc(100% - 240px);font-size:16px;font-weight:400} .search_item select{min-width:130px;padding:8px 30px 8px 8px;border-radius:4px;font-size:16px;height:100%} .search_item label{font-weight:400} #typeDetail div{display:inline-block} #typeDetail div div{margin-right:10px} #typeDetail div div input{margin-right:8px} #typeDetail label{font-size:16px;font-weight:400;line-height:40px} input[type="date"] {width: 160px;padding: 8px;font-size: 16px;border: 1px solid #ccc;border-radius: 4px;line-height:100%} @media all and (max-width:1600px){ .search_items{height:100%;line-height:24px} } @media all and (max-width:1024px){ } @media all and (max-width:768px){ .search_items{display:block} .search_name{width:100%} .search_item{width:100%} #typeDetail label{line-height:24px} .gray-box{padding:40px} .white-box-sm{padding:20px 40px} } @media all and (max-width:450px){ .white-box-sm{display:block;text-align:center;} .white-box-sm button{width:100%} .white-box-sm h4{margin-top:10px} } .state{} .subscribe-ing{display:inline-block;padding:4px 10px;background:#066152;border-radius:3px;color:#fff;font-weight:400} .subscribe-cancel{display:inline-block;padding:4px 10px;background:#000;border-radius:3px;color:#fff;font-weight:400} .subscribe-end{display:inline-block;padding:4px 10px;background:#999;border-radius:3px;color:#fff;font-weight:400} button#unsubscribeBtn{color:#000;font-weight:600;border:1px solid #000;padding:5px 10px;font-size:15px;font-weight:400} .contents_wrap #section2{background:#fff} .list-top-wrap{display:flex;justify-content:space-between;margin-top:30px} .count{font-size:16px} .contents_wrap .filter_wrap2 .filter_box{padding:0;border:0} .filter_wrap2 .filter_box .filter-top-srch{padding:20px 30px;display:flex;justify-content:center;background:#2f5c93;/*background:linear-gradient(to right, #0e6baf, #0041a1);*/border:1px solid #ebebeb;border-radius:12px;z-index:1;position:relative} .filter_wrap2 .filter_box .filter-top-srch .event-name span.srch-tit{color:#fff;font-size:22px;font-family:'sebang'} .contents_wrap .filter_btn_box a.filter_reset{color:#535353} .contents_wrap .filter_box .filter-more-wrap{border-radius:20px;border:1px solid #ebebeb;padding:30px;background:#fafafa} .contents_wrap .filter-top-srch .filter_btn_box a.filter_search{height:41px;line-height:41px;vertical-align:top} .contents_wrap .filter_box .filter-top-srch .filter_btn_box{margin-top:9px;gap:0 4px} .contents_wrap .filter_box .filter-top-srch .filter_btn_box a.filter_search{border-radius:6px;background:#3f81ea;font-family:'sebang';letter-spacing:1px;font-size:15px} .contents_wrap .filter_box .filter-top-srch .filter_btn_box a.filter_detail{ height:41px;line-height:41px;border-radius:6px;font-family:'sebang';color:#535353;font-size:15px} .contents_wrap .filter_box .filter-top-srch .event-name .more-srch-cont input{border-radius:6px} @media all and (max-width:800px){ :where(#section2, .section1) .filter_box .filter-top-srch .event-name{width:100%} :where(#section2, .section1) .filter_box .filter-top-srch .event-name .more-srch-cont{width:calc(100% - 10px)} .filter_wrap2 .filter_box .filter-top-srch{display:block} .contents_wrap .filter_box .filter-top-srch .filter_btn_box{width:100%;padding:0} .contents_wrap .filter_box .filter-top-srch .filter_btn_box a.filter_search{width:50%} .contents_wrap .filter_box .filter-top-srch .filter_btn_box a.filter_detail{width:50%} } @media all and (max-width:600px){ .filter_wrap2 .filter_box .filter-top-srch .event-name span.srch-tit{font-size:18px} } /* culture map */ .culture_map_container {position: relative;} .culture_map {position: relative; overflow: hidden; box-shadow: 0 0 5px #00000029;} .culture_map ::-webkit-scrollbar {width: 5px;} .culture_map ::-webkit-scrollbar-thumb {background: #d9d9d9; border-radius: 5px;} .culture_map ::-webkit-scrollbar-track {background: #fff;} .culture_map_box {height: 800px;} .culture_map .search_box {position: absolute; left:-340px; top:0; height: 100%; transition: all 0.3s ease-in-out;z-index:2} .culture_map .search_box.active {left: 0;} .culture_map .search_item {width: 340px; height:100%; background: #fff; padding:30px 40px; max-height: 100%; overflow-y: auto; overflow-x: hidden; transition: all 0.3s ease-in-out;} .culture_map .search_box.active .search_item {box-shadow: 0 0 5px #00000029;} .culture_map .tab_field {display: flex; align-items: center; margin-bottom:20px;} .culture_map .tab_field li {flex:1 1 auto;} .culture_map .tab_field a {display: flex; align-items: center; justify-content: center; height: 38px; background:#E8E8E8; color: #6B6B6B; border:1px solid #E8E8E8; border-bottom-color:#111;} .culture_map .tab_field a.active {background:#fff; border-color:#111; border-bottom-color:#fff; color: #111; font-weight: 800;} .culture_map .search_title {font-size: 28px!important; font-weight: 700; letter-spacing: -0.5px; margin-bottom:15px;} .culture_map .tab {display: flex; align-items: center; border:1px solid #000; border-radius: 50px; overflow: hidden; margin-bottom:20px;} .culture_map .tab li {flex:1 1 auto; border-left:1px solid #000;} .culture_map .tab li:first-child {border-left:none;} .culture_map .tab .tab-lnk {width:100%; height: 100%; display: flex; align-items: center; justify-content: center; transition:all 0.2s ease-in-out;} .culture_map .tab .tab-lnk.active {background:#000; color: #fff;} .culture_map .date_box {display: flex; align-items: center; justify-content: space-between;position:relative} .culture_map .date {font-size: 18px; font-weight: 700;} .culture_map .date.month {background:url("../img/calendar.png") no-repeat left center; padding-left:0px;} .culture_map .calendar_prev .icon, .culture_map .calendar_next .icon {color: #707070; font-size: 24px; margin-top:2px;} .culture_map .calendar_prev .icon:hover, .culture_map .calendar_next .icon:hover {color: #000;} .culture_map .month_list {display: flex; flex-wrap:wrap; align-items: center; justify-content: space-between; margin-top:15px;} .culture_map .month_list li {flex: 0 0 16.6666%; padding:3px 0; text-align: center;} .culture_map .month_box .month {display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 100%; background: #e8e8e8; color: #6b6b6b; border:1px solid #e8e8e8; font-size: 13px; margin:0 auto; transition:all 0.2s ease-in-out;} .culture_map .month_box .month:hover {border-color: #000; color: #000;} .culture_map .month_box .month.active {background:#000; color: #fff;} .culture_map .category_list { display: flex;flex-wrap: wrap;width: 100%;gap: 10px;margin-top:10px} .culture_map .category_list li{flex: 0 0 calc(50% - 10px);height: 60px;color:#fff;display: flex;align-items: center;justify-content: center;font-weight: bold; border-radius: 8px;} .culture_map .category_lnk {display: inline-flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 100%; border:1px solid #EBEBEB; font-weight: 600; transition: all 0.2s ease-in-out;} .culture_map .category_lnk:not(.active):hover {padding-bottom:8px;} .culture_map .category_lnk .icon {font-size: 22px; margin-bottom:5px;} .culture_map .category_lnk.perform{color: #f19c5a;} .culture_map .category_lnk.exhibit{color: #2a7db9;} .culture_map .category_lnk.event{color: #377733;} .culture_map .category_lnk.edu{color: #E31C93;} .culture_map .category_lnk.perform .icon {color: #f19c5a;} .culture_map .category_lnk.exhibit .icon {color: #2a7db9;} .culture_map .category_lnk.event .icon {color: #377733;} .culture_map .category_lnk.edu .icon {color: #E31C93;} .culture_map .category_lnk:before{position:relative;width:30px;height:30px;content:'';} .culture_map .category_lnk.perform:before{background:url(/img/artinfo/common/icon_cate01_n.png) center top no-repeat;background-size:30px;} .culture_map .category_lnk.exhibit:before{background:url(/img/artinfo/common/icon_cate02_n.png) center top no-repeat;background-size:20px;} .culture_map .category_lnk.event:before{background:url(/img/artinfo/common/icon_cate03_n.png) center top no-repeat;background-size:20px;} .culture_map .category_lnk.edu:before{background:url(/img/artinfo/common/icon_cate04_n.png) center top no-repeat;background-size:20px;} .culture_map .category_lnk.active{position:relative;} .culture_map .category_lnk.active:before{position:relative;width:30px;height:30px;content:'';} .culture_map .category_lnk.perform.active {background: #f19c5a;} .culture_map .category_lnk.perform.active:before{background:url(/img/artinfo/common/icon_cate01_w.png) center top no-repeat;background-size:30px;} .culture_map .category_lnk.exhibit.active {background: #2a7db9;} .culture_map .category_lnk.exhibit.active:before{background:url(/img/artinfo/common/icon_cate02_w.png) center top no-repeat;background-size:20px;} .culture_map .category_lnk.event.active {background: #377733;} .culture_map .category_lnk.event.active:before{background:url(/img/artinfo/common/icon_cate03_w.png) center top no-repeat;background-size:20px;} .culture_map .category_lnk.edu.active {background: #E31C93;} .culture_map .category_lnk.edu.active:before{background:url(/img/artinfo/common/icon_cate04_w.png) center top no-repeat;background-size:20px;} .culture_map .category_lnk.active, .culture_map .category_lnk.active .icon {color: #fff;} .culture_map .filter_box2 {border-top:1px solid #000; margin-top:25px;position:relative;display:block;padding-top:0} .culture_map .filter_btn {position: relative; color: #555; font-size: 15px; padding-left:22px; flex:0 0 50%; text-align: left; margin:5px 0; transition: all 0.2s ease-in-out;} .culture_map .filter_btn::before {display: inline-flex; align-items: center; justify-content: center; content: "\f058"; font-family: "FontAwesome"; font-weight: 300; position: absolute; left:0; top:4px; color: #aaa; transition: all 0.2s ease-in-out;} .culture_map .filter_btn:hover, .culture_map .filter_btn:hover::before, .culture_map .filter_btn.active {color: #000;} .culture_map .filter_btn.active::before {content: "\f058"; font-weight: 900; color: #000;} .culture_map .filter_title {padding:8px 0; border-bottom:1px solid #dfdfdf;} .culture_map .filter_title .filter_btn {font-weight: 700; padding:0 25px 0 0; color: #111; font-size: 16px; flex:none;} .culture_map .filter_title .filter_btn::before {left:auto; right:0; top:5px;} .culture_map .filter_title .filter_btn .desc {color: #999999;} .culture_map .filter_list {display: flex; flex-wrap:wrap; padding:10px 0; align-items: flex-start;} .culture_map [data-tab-cont] {display: none;} .culture_map [data-tab-cont].active {display: block;} .culture_map .search_close {position: absolute; left:339px; top:50px; width: 20px; height: 50px; display: flex; align-items: center; justify-content: center; background: #000; color: #707070; box-shadow: 1px 0 2px #00000029; border-radius: 0 3px 3px 0;} .culture_map .search_box .search_close .icon {transition: all 0.2s ease-out; transform:rotate(180deg);} .culture_map .search_box.active .search_close .icon {transform:none;} .culture_map .section2 .popup {z-index: 6;} .culture_map .popup {position: absolute; left: auto; top:0; transform:none; right: 0; height: 100%; z-index: 5; border:none; box-shadow: 0 0 5px #00000029; max-width: 340px; padding:30px; overflow-y: auto; overflow-x: hidden; display: none; background: #fff;} .culture_map .popup .popup_img {width:100%;} .culture_map .popup h3 {padding-right:55px; margin-bottom: 16px; font-size: 24px; font-weight: 500; color: #000; line-height: 1.2; text-align: left; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;} .culture_map .popup dl dt {width: 75px;} .culture_map .popup .box-item {display: flex; gap:5px; width:100%;} .culture_map .popup .view {width: auto; flex:1 1 auto; font-size: 15px; font-weight: 400;} .culture_map .popup .popup_close {right: 30px; top:25px; padding:38px 38px 0 0; background-size: contain; position: absolute; background: url("../img/popup_close.png") no-repeat center center; background-size: auto 100%;} .culture_map_container .culture_map_btn {position: absolute; left:-44px; top:50%; transform:translateY(-50%);} .culture_map_badge {display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 13px; border:1px solid #70308a; color: #70308a; background: #fff; border-radius: 100%;} .culture_map_badge.icon01 {border-color: #00B6AD; color: #00B6AD;} .culture_map_badge.icon02 {border-color: #FDB827; color: #FDB827;} .culture_map_badge.icon03 {border-color: #E31C93; color: #E31C93;} .culture_map .culture_list {height: auto;} .culture_map .culture_list .culture_box {flex:0 0 100%;} .culture_map .culture_list .img_box {width: 110px;} .culture_map .culture_list .text_box {padding:0;} .culture_map .culture_list .title {font-size: 18px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;} .culture_map .culture_list .culture_box a {gap:15px; padding:10px 0;} .culture_map .culture_list .text_box .date {font-size: 14px; font-weight: normal; padding-right:0;} .search_box .btn-icon-reduction { transform: rotate(180deg); } .search_box.active .btn-icon-reduction { transform: rotate(0deg); } @media all and (max-width: 1450px) { .culture_map .popup {padding:30px 20px;} .culture_map .popup .box-item {padding:0 30px;} .culture_map .popup .popup_content {padding:0 10px;} .culture_map .popup h3 {font-size: 20px;} .culture_map .search_title {font-size: 22px;} .culture_map_container .culture_map_btn {display: none;} } @media all and (max-width: 768px) { .culture_map ::-webkit-scrollbar {width: 3px;} .culture_map .search_box {left: -280px;} .culture_map .search_item {width: 280px; padding:25px;} .culture_map .search_title {font-size: 20px; margin-bottom:10px;} .culture_map .tab_field a {font-size: 14px;} .culture_map .tab {margin-bottom:10px;width:233px!important} .culture_map .tab .tab-lnk {height: 100%; font-size: 14px;} .culture_map .date {font-size: 15px;line-height:30px} .culture_map .calendar_prev .icon, .culture_map .calendar_next .icon {font-size: 20px;} .culture_map .month_list {margin-top:10px;} .culture_map .month_box .month {width: 32px; height: 32px; font-size: 12px;} .culture_map .category_list {margin-top:15px; gap:5px;justify-content:center} .culture_map .category_lnk {/*width: 72px; height: 72px;*/ font-size: 14px;} .culture_map .category_lnk .icon {font-size: 18px;} .culture_map .filter_box2 {margin-top:15px;} .culture_map .filter_btn {font-size: 14px;} .culture_map .filter_title .filter_btn {font-size: 15px;} .culture_map .popup {padding:15px;} .culture_map .popup .popup_content {padding:0 10px;} .culture_map .popup h3 {padding-right:45px; font-size: 18px;} .culture_map .popup .box {bottom:15px;} .culture_map .popup .box-item {padding:0 25px;} .culture_map .popup .view {font-size: 14px;} .culture_map .popup .popup_close {right: 25px; top:8px;} .culture_map_box {height: 600px;} .culture_map .culture_list .title {font-size: 15px; line-height: 1.3;} .culture_map .culture_list .text_box .box {margin-bottom:5px;} .culture_map .search_close{left:280px} } @media all and (max-width: 350px) { .culture_map .search_box {left: -260px;} .culture_map .search_box .search_item {width: 260px; padding:15px;} .culture_map .search_close{left:260px} } .culture_map .search_title.space {border-bottom:1px solid #000; padding-bottom:15px; text-align: center; font-size: 22px;} .culture_map .space_tab {display: flex; flex-wrap: wrap; margin:20px -5px -5px;} .culture_map .space_tab li {flex:0 0 50%; padding:5px;} .culture_map .space_lnk {display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; background: #ebebeb; border:1px solid #ebebeb; transition: all 0.2s ease-in-out; line-height: 1.2; font-size: 15px; letter-spacing: -0.5px} .culture_map .space_lnk:hover {border-color: #000;} .culture_map .space_lnk.active {background: #000; border-color:#000; color: #fff;} .culture_map .popup .popup_title {font-size: 20px; font-weight: 700; margin-bottom:10px;} .culture_map .popup .address {position: relative; padding-left:20px; margin-bottom:10px; font-weight: 700;} .culture_map .popup .address::before {display: block; content:"\f3c5"; font-family: "FontAwesome"; font-weight: 900; position: absolute; left:0; top:-1px; font-size: 18px;} .culture_map .popup .vr {height: 44px; line-height: 42px; border:1px solid #313131; color: #313131; padding:0 20px;} .culture_map .culture_list .address {font-weight: normal; color: #828282; margin:5px 0 0; line-height: 1.3; font-size: 15px;} @media all and (max-width: 768px) { .culture_map .search_title.space {font-size: 20px; padding-bottom:10px;} .culture_map .popup .vr {font-size: 14px; height: 38px; line-height: 36px;} .culture_map .popup .popup_title {font-size: 18px; margin-bottom:5px;} .culture_map .popup .address {font-size: 14px; margin-bottom:5px;} .culture_map .popup .address::before {font-size: 16px;} .culture_map .space_tab {margin:15px -3px -3px;} .culture_map .space_tab li {padding:3px;} .culture_map .space_lnk {font-size: 14px;} } @media all and (max-width: 414px) { .culture_map .popup .vr {height: 32px; line-height: 30px;} } .btn-icon-prev{background:url(/img/artinfo/common/calendar_prev.png) no-repeat;width:9px;height:17px;content:'';position:absolute;top:7px;left:9px} .btn-icon-next{background:url(/img/artinfo/common/calendar_prev.png) no-repeat;width:9px;height:17px;content:'';position:absolute;top:7px;right:9px;transform:rotate(180deg)} .btn-icon-reduction{background:url(/img/artinfo/common/calendar_prev_w.png) no-repeat;width:9px;height:17px;content:'';position:absolute;top:15px;left:0px} .btn-icon-reduction-w{background:url(/img/artinfo/common/calendar_prev_w.png) no-repeat;width:9px;height:17px;content:'';position:absolute;top:15px;left:0px} /*문화소식등록*/ .step-list-wrap{} .step-list-wrap .step-list{display:flex;position:relative} .step-list-wrap .step-list .r-step{width:20%;padding-top:100px;} .step-list-wrap .step-list .r-step.r-step01{background:url(/img/artinfo/cont/r_step_icon01.png) center top no-repeat} .step-list-wrap .step-list .r-step.r-step02{background:url(/img/artinfo/cont/r_step_icon02.png) center top no-repeat} .step-list-wrap .step-list .r-step.r-step03{background:url(/img/artinfo/cont/r_step_icon03.png) center top no-repeat} .step-list-wrap .step-list .r-step.r-step04{background:url(/img/artinfo/cont/r_step_icon04.png) center top no-repeat} .step-list-wrap .step-list .r-step.r-step05{background:url(/img/artinfo/cont/r_step_icon05.png) center top no-repeat} .step-list-wrap .step-list:after{height:1px;background:#ebebeb;position:absolute;content:"";width:100%;top:50px;z-index:-1} .step-list-wrap .step-list .r-step .r-step-tit{text-align:center;color:#000;font-weight:600;} .step-list-wrap .step-list .r-step .r-step-cont{text-align:center;color:#666;} .step-box-wrap{margin-top:50px} .step-box-wrap .step-box{margin-bottom:20px;padding:30px 30px 30px 130px;border-radius:20px;} .step-box-wrap .step-box.step-box01{background:#f9f9f9 url(/img/artinfo/cont/r_step2_icon01.png) 30px center no-repeat;background-size:70px} .step-box-wrap .step-box.step-box02{background:#f9f9f9 url(/img/artinfo/cont/r_step2_icon02.png) 30px center no-repeat;background-size:70px} .step-box-wrap .step-box.step-box03{background:#f9f9f9 url(/img/artinfo/cont/r_step2_icon03.png) 30px center no-repeat;background-size:70px} .step-box-wrap .step-box.step-box04{background:#f9f9f9 url(/img/artinfo/cont/r_step2_icon04.png) 30px center no-repeat;background-size:70px} .step-box-wrap .step-box.step-box05{background:#f9f9f9 url(/img/artinfo/cont/r_step2_icon05.png) 30px center no-repeat;background-size:70px} .step-box-wrap .step-box .step-box-tit{font-size:22px;color:#000;font-weight:500;font-family:'SCDream'} .step-box-wrap .step-box .step-box-cont{font-size:20px;color:#000;font-weight:300} .step-box-wrap .step-box .step-box-button {margin-top:5px} .step-box-wrap .step-box .step-box-button button{background:#000;border-radius:10px;color:#fff} @media all and (max-width: 500px) { .step-list-wrap .step-list:after{top:25px} .step-list-wrap .step-list .r-step{background-size:50px!important;padding-top:60px} .step-list-wrap .step-list .r-step .r-step-cont{line-height:120%} .step-box-wrap{margin-top:30px} .step-box-wrap .step-box{padding:90px 20px 20px 20px;background-position:center 30px!important;text-align:center;background-size:50px!important;} .step-box-wrap .step-box .step-box-tit{font-size:18px;} .step-box-wrap .step-box .step-box-cont{font-size:16px;} } #section-c2 .no_img{position: relative; margin: 250px 0;} #section-c2 .no_img P{text-align: center; width: 100%; font-size: 24px; color: #111;} #section-c2 .no_img img{display:none !important; width: 100%;} #section-c2 .no_img img.pc{display: block;} #section-c2 .no_img img.mobile{display: none;} /*#section-c2::after{content: ''; position: absolute; top:20px; right:-97px; bottom: 0; width: 1px; background: #d2d2d2;}*/ #section-c2 h2{margin-bottom: 15px; font-size: 60px; font-weight: 700; color: #000;} #section-c2 .tab{width: 246px; height: 45px; line-height: 45px; display: flex; border-radius: 10px; overflow: hidden;border:1px solid #d1d1d1} #section-c2 .tab li{flex: 1; height: 100%; border-left:1px solid #d1d1d1;} #section-c2 .tab li:first-child{border-left:0} #section-c2 .tab li a{display: block; height: 100%; font-size: 20px; color: #000; text-align: center;background:#fff;line-height:43px} #section-c2 .tab li a.active{background: #000; color: #fff;} #section-c2 .tab li a#btnCalendar{background:#fff url(/img/artinfo/main/icon_calendar.png) center center no-repeat;font-size:0} #section-c2 .tab li a.active#btnCalendar{background:#000 url(/img/artinfo/main/icon_calendar_w.png) center center no-repeat} :where(#section-c2, .section-c2) .culture_wrap{border-bottom: 1px solid #dcdcdc;} :where(#section-c2, .section-c2) .culture_wrap.two-cols{grid-template-columns:repeat(2, 1fr)} :where(#section-c2, .section-c2) .culture_wrap.three-cols{grid-template-columns:repeat(3, 1fr)} :where(#section-c2, .section-c2) .culture_wrap:last-of-type{border-bottom: 0;} :where(#section-c2, .section-c2) .culture_wrap:last-child{border-bottom: 0;} :where(#section-c2, .section-c2) .culture_map .popup{width:340px} :where(#section-c2, .section-c2) .culture_map .popup .popup_close{width: 40px;height: 40px;position: absolute;top: 20px;right: 20px;background: url(/img/artinfo/common/btn_pop_close.png) no-repeat;} :where(#section-c2, .section-c2) .culture_list_wrap{ margin-top:40px;position: relative;width: 100%;transition: all 0.3s;} :where(#section-c2, .section-c2) .culture_list{height: 590px; overflow: auto;gap: 16px; flex: 1; transition: grid-template-columns 0.3s; } :where(#section-c2, .section-c2) .culture_list::-webkit-scrollbar {width: 5px;} :where(#section-c2, .section-c2) .culture_list::-webkit-scrollbar-thumb {background-color: #d2d2d2; border-radius: 50px;} :where(#section-c2, .section-c2) .culture_list::-webkit-scrollbar-track {background-color: #eee; } :where(#section-c2, .section-c2) .culture_list .culture_box{width: 100%; /*display: flex; flex-wrap: wrap;*/} :where(#section-c2, .section-c2) .culture_list .culture_box a{display: flex; gap: 0 19px;width: 100%; padding: 14px;background:#fff;} :where(#section-c2, .section-c2) .culture_list .culture_box a:hover img{transform: scale(1.2);} :where(#section-c2, .section-c2) .culture_list .culture_box a:hover h3{text-decoration: underline;} :where(#section-c2, .section-c2) .culture_list .img_box{position: relative; border: 1px solid #e5e5e5; background: #f0f0f0;overflow: hidden;margin:0 auto} :where(#section-c2, .section-c2) .culture_list .img_box span{position: absolute; top: 0; left:0; display: block; height: 26px; line-height: 24px; padding: 0 10px; font-size: 14px; font-weight: 300; color: #fff;} :where(#section-c2, .section-c2) .culture_list .img_box span.proceeding{background: #066152; color:#fff; border-bottom:1px solid #e5e5e5; border-right:1px solid #e5e5e5;} :where(#section-c2, .section-c2) .culture_list .img_box span.expected{background: #535353;} :where(#section-c2, .section-c2) .culture_list .img_box span.end{background: #535353;} :where(#section-c2, .section-c2) .culture_list .img_box img{display: block; position: absolute; top:0; left:0; right:0; bottom: 0; max-width: 100%; max-height: 100%; object-fit: cover; margin: auto; transition: all .5s;} :where(#section-c2, .section-c2) .culture_list .text_box{position: relative; margin-top:10px;width:calc(100% - 120px)} :where(#section-c2, .section-c2) .culture_list .text_box .culture_cont{margin-bottom:15px} :where(#section-c2, .section-c2) .culture_list .text_box .culture_cont .culture_price{color:#444} :where(#section-c2, .section-c2) .culture_list .text_box .culture_cont .culture_date{color:#777;font-weight:300;letter-spacing:0.5px;font-size:12px} :where(#section-c2, .section-c2) .culture_list .text_box .box{display: flex; flex-wrap: wrap; gap: 4px 3px; margin-bottom: 10px; } :where(#section-c2, .section-c2) .culture_list .text_box .box span.active{background: #535353; border: 0; color: #fff;} :where(#section-c2, .section-c2) .culture_list .text_box .box span{display: block; padding: 0 12px; height: 24px; line-height: 22px; background:#808080;color: #fff; text-align: center; font-weight: 300; font-size: 12px; border: 1px solid #a1a1a1; border-radius: 5px} :where(#section-c2, .section-c2) .culture_list .text_box h3{font-size: 14px; font-weight: 500; color:#000; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3;} :where(#section-c2, .section-c2) .culture_list .text_box .date{padding-right: 35px; display: block; position: absolute; left: 0; right:0; bottom: 0; font-size: 16px; color: #828282; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} :where(#section-c2, .section-c2) .culture_list .text_box .cost{font-size: 14px; color:#828282;} :where(#section-c2, .section-c2) .culture_list .text_box .cost.charge{color:#000;} :where(#section-c2, .section-c2) .culture_list .text_box a{position: absolute; left:0; bottom: 0; padding-right: 45px; line-height: 1; font-size: 16px; color: #828282;} :where(#section-c2, .section-c2) .culture_list .text_box a::after{content: ''; padding: 16px 28px 0 0; position: absolute; top:1px; right:0; background: url(../img/view2.png)no-repeat;} :where(#section-c2, .section-c2) .culture_list .text_box a:hover{color:#111;} :where(#section-c2, .section-c2) .culture_list .text_box a:hover::after{background: url("../img/view2_hover.png") no-repeat;} :where(#section-c2, .section-c2) .culture_list .culture_view{display: none; margin: 13px auto 0; width: 160px; height: 36px; line-height: 34px; background: #1b1b1b; font-size: 14px; font-weight: 500; color:#fff; text-align: center;} :where(#section-c2, .section-c2) .culture_list_wrap .box{display: flex; flex-wrap: wrap; gap: 4px 3px; margin-bottom: 15px; } :where(#section-c2, .section-c2) .culture_list_wrap .box > span.active{background: #535353; border: 0; color: #fff;} :where(#section-c2, .section-c2) .culture_list_wrap .box > span{display: block; padding: 0 12px; height: 24px; line-height: 22px; color: #535353; text-align: center; font-weight: 300; font-size: 14px; border: 1px solid #a1a1a1; border-radius: 50px;} :where(#section-c2, .section-c2) .culture_list_wrap .box a.btnView{display: block; width:calc(100% - 128px); height: 44px; line-height: 42px; text-align: center; background: #313131; color:#fff; font-weight: 500; font-size: 18px;} :where(#section-c2, .section-c2) .culture_list_wrap .box a.btnWish{display: flex;justify-content: center;width: 68px;height: 44px;line-height: 42px;border: 1px solid #313131;} :where(#section-c2, .section-c2) .culture_list_wrap .box a.btnWish #favoriteCnt{position:relative;padding-left: 24px;font-size: 18px;color: #111;line-height:42px} :where(#section-c2, .section-c2) .culture_list_wrap .box a.btnWish #favoriteCnt:before{content: '';padding: 18px 21px 0 0;position: absolute; top: 14px;left: 0;background: url(/img/artinfo/common/want.png) no-repeat;} :where(#section-c2, .section-c2) .culture_list_wrap .box a.btnWish.liked #favoriteCnt:before{content: '';padding: 18px 21px 0 0;position: absolute; top: 14px;left: 0;background: url(/img/artinfo/common/want_liked.png) no-repeat;} :where(#section-c2, .section-c2) .culture_list_wrap .box a.btnWish span.btnWish{position: relative;padding-left: 24px;font-size: 18px;color: #111;} :where(#section-c2, .section-c2) .culture_list_wrap .box a.btnWish span.btnWish:before{content: '';padding: 18px 21px 0 0;position: absolute;top: 14px;left: 0;background: url(/img/artinfo/common/want.png) no-repeat;} :where(#section-c2, .section-c2) .culture_list_wrap .box .share_wrap{position:relative} :where(#section-c2, .section-c2) .culture_list_wrap .box .share_wrap .btnSnsShare{position: relative; width: 44px;height: 44px;border: 1px solid #313131;vertical-align: top;line-height:42px} :where(#section-c2, .section-c2) .culture_list_wrap .box .share_wrap .share_close{position: relative;width: 44px;height: 44px;border: 1px solid #313131;border-top: none;vertical-align: top;} :where(#section-c2, .section-c2) .culture_list_wrap .box .share_wrap .share_box{padding: 0 8px;width: auto;position: absolute;bottom: 43px;right: 0;left: 0;z-index: 1;box-shadow: none;border: 1px solid #333;background-color: #fff;transition: all .3s;border-bottom: 0;} :where(#section-c2, .section-c2) .culture_list_wrap .box .share_wrap button.share_btn::after{content: '';padding: 22px 18px 0 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: url(/img/artinfo/common/share_icon.png) no-repeat} :where(#section-c2, .section-c2) .culture_list_wrap .box .share_wrap button.share_close{display: none; position: relative; width: 44px; height: 44px; border: 1px solid #313131; border-top:none; vertical-align: top;} :where(#section-c2, .section-c2) .culture_list_wrap .box .share_wrap button.share_close::after{content: ''; padding: 14px 16px 0 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: url("/img/artinfo/common/share_close.png") no-repeat;} :where(#section-c2, .section-c2) .culture_list_wrap .box .share_wrap .share_box.type01 {display:none; padding:0 8px; width: auto;position:absolute;bottom:43px;right:0; left:0;z-index:1; box-shadow: none; border:1px solid #333; background-color:#fff;transition: all .3s; border-bottom: 0;} :where(#section-c2, .section-c2) .culture_list_wrap .box .share_wrap .share_box.type01 .sns_wrap {margin: 0; display:flex; flex-wrap:wrap; flex-flow: column; align-items: center; } :where(#section-c2, .section-c2) .culture_list_wrap .box .share_wrap .share_box.type01 .sns_btn_box {width: 100%; padding:10px 0; border-bottom:1px solid #ddd;} :where(#section-c2, .section-c2) .culture_list_wrap .box .share_wrap .share_box.type01 .sns_btn_box button {display:block; margin:0 auto;} :where(#section-c2, .section-c2) .culture_list_wrap .box .share_wrap .share_box.type01 .sns_btn_box img {display:block;} :where(#section-c2, .section-c2) .culture_list_wrap .box .share_wrap .share_box.type01 .copy_box {margin: 0; padding:10px 0; border: 0; border-bottom: 1px solid #ddd;} :where(#section-c2, .section-c2) .culture_list_wrap .box .share_wrap .share_box.type01 .copy_box .btn_copy {display:block; position: static; margin:0 auto; width:0; height:0; overflow:hidden; padding:20px 24px 0 0; background:url("/img/artinfo/common/circleCopy.png") no-repeat center center;} :where(#section-c2, .section-c2) .culture_list_wrap .box .share_wrap .share_box.type01 .copy_box input {padding:10px 15px; outline:none; font-weight:300;} :where(#section-c2, .section-c2) .culture_list_wrap .box .share_wrap .share_box.type01 .copy_box input[type="text"] {display:none;} :where(#section-c2, .section-c2) .culture_list_wrap .box .share_wrap .share_box.type01 .copy_box input:disabled {color:#7a7a7a; background-color:#fff;} :where(#section-c2, .section-c2) .popup{ width: 0; overflow: hidden; background: #fff; box-shadow: -2px 0 12px rgba(0,0,0,0.09); transition: width 0.3s;padding:38px 64px 34px} :where(#section-c2, .section-c2) .popup.open{width:33.333%;} :where(#section-c2, .section-c2) .popup.open h3{width:100%;text-align:center;line-height:160%;padding-right:0;margin-top:30px} :where(#section-c2, .section-c2) .popup .popup_close{width:40px;height:40px;position:absolute;top:20px;right:20px;background:url(/img/artinfo/common/btn_pop_close.png) no-repeat} :where(#section-c2, .section-c2) .popup .popup_img{position:relative;width: 210px; height: 300px; border: 1px solid #e5e5e5; background: #f0f0f0; overflow: hidden;margin:0 auto} :where(#section-c2, .section-c2) .popup .popup_img img{display: block; position: absolute;top: 0;left: 0; right: 0; bottom: 0; max-width: 100%; max-height: 100%; object-fit: cover; margin: auto; transition: all .5s;} :where(#section-c2, .section-c2) .popup .popup_img span{position: absolute; top: 0; left:0; display: block; height: 26px; line-height: 24px; padding: 0 10px; font-size: 14px; font-weight: 300; color: #fff;} :where(#section-c2, .section-c2) .popup .popup_img span.proceeding{background: #066152; color:#fff; border-bottom:1px solid #e5e5e5; border-right:1px solid #e5e5e5;} :where(#section-c2, .section-c2) .popup .popup_img span.expected{background: #535353;} :where(#section-c2, .section-c2) .popup .popup_img span.end{background: #535353;} :where(#section-c2, .section-c2) .popup .popup_img span.cost{left: auto;right: 10px;top: 10px;width: 45px;height: 45px; border-radius: 100%;background: #535353;display: flex;align-items: center; justify-content: center;} .box span.active{background:#666;border-radius:6px;color:#fff;padding:2px 10px;} :where(#section-c2, .section-c2) .popup .popup_text{} :where(#section-c2, .section-c2) .popup .popup_text dl{display:flex;font-size:18px;} :where(#section-c2, .section-c2) .popup .popup_text dl dt{width:70px;color:#000;font-weight:500;font-size:15px;} :where(#section-c2, .section-c2) .popup .popup_text dl dd{width:calc(100% - 70px);display: -webkit-box; -webkit-line-clamp: 2, -webkit-box-orient: vertical;font-size:15px} :where(#section-c2, .section-c2) .popup .box{display: flex; flex-wrap: wrap; gap: 4px 3px; margin-bottom: 15px;margin-top:15px} :where(#section-c2, .section-c2) .popup .box > span.active{background: #535353; border: 0; color: #fff;} :where(#section-c2, .section-c2) .popup .box > span{display: block; padding: 0 12px; height: 24px; line-height: 22px; color: #535353; text-align: center; font-weight: 300; font-size: 14px; border: 1px solid #a1a1a1; border-radius: 50px;} :where(#section-c2, .section-c2) .popup .box a.btnView{display: block; width:calc(100% - 128px); height: 44px; line-height: 42px; text-align: center; background: #313131; color:#fff; font-weight: 500; font-size: 18px;} :where(#section-c2, .section-c2) .popup .box a.btnWish{display: flex;justify-content: center;width: 68px;height: 44px;line-height: 42px;border: 1px solid #313131;} :where(#section-c2, .section-c2) .popup .box a.btnWish #favoriteCnt{position:relative;padding-left: 24px;font-size: 18px;color: #111;line-height:42px} :where(#section-c2, .section-c2) .popup .box a.btnWish #favoriteCnt:before{content: '';padding: 18px 21px 0 0;position: absolute; top: 14px;left: 0;background: url(/img/artinfo/common/want.png) no-repeat;} :where(#section-c2, .section-c2) .popup .box a.btnWish.liked #favoriteCnt:before{content: '';padding: 18px 21px 0 0;position: absolute; top: 14px;left: 0;background: url(/img/artinfo/common/want_liked.png) no-repeat;} :where(#section-c2, .section-c2) .popup .box a.btnWish span.btnWish{position: relative;padding-left: 24px;font-size: 18px;color: #111;} :where(#section-c2, .section-c2) .popup .box a.btnWish span.btnWish:before{content: '';padding: 18px 21px 0 0;position: absolute;top: 14px;left: 0;background: url(/img/artinfo/common/want.png) no-repeat;} :where(#section-c2, .section-c2) .popup .box .share_wrap{position:relative} :where(#section-c2, .section-c2) .popup .box .share_wrap .btnSnsShare{position: relative; width: 44px;height: 44px;border: 1px solid #313131;vertical-align: top;line-height:42px} :where(#section-c2, .section-c2) .popup .box .share_wrap .share_close{position: relative;width: 44px;height: 44px;border: 1px solid #313131;border-top: none;vertical-align: top;} :where(#section-c2, .section-c2) .popup .box .share_wrap .share_box{padding: 0 8px;width: auto;position: absolute;bottom: 43px;right: 0;left: 0;z-index: 1;box-shadow: none;border: 1px solid #333;background-color: #fff;transition: all .3s;border-bottom: 0;} :where(#section-c2, .section-c2) .popup .box .share_wrap button.share_btn::after{content: '';padding: 22px 18px 0 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: url(/img/artinfo/common/share_icon.png) no-repeat} :where(#section-c2, .section-c2) .popup .box .share_wrap button.share_close{display: none; position: relative; width: 44px; height: 44px; border: 1px solid #313131; border-top:none; vertical-align: top;} :where(#section-c2, .section-c2) .popup .box .share_wrap button.share_close::after{content: ''; padding: 14px 16px 0 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: url("/img/artinfo/common/share_close.png") no-repeat;} :where(#section-c2, .section-c2) .popup .box .share_wrap .share_box.type01 {display:none; padding:0 8px; width: auto;position:absolute;bottom:43px;right:0; left:0;z-index:1; box-shadow: none; border:1px solid #333; background-color:#fff;transition: all .3s; border-bottom: 0;} :where(#section-c2, .section-c2) .popup .box .share_wrap .share_box.type01 .sns_wrap {margin: 0; display:flex; flex-wrap:wrap; flex-flow: column; align-items: center; } :where(#section-c2, .section-c2) .popup .box .share_wrap .share_box.type01 .sns_btn_box {width: 100%; padding:10px 0; border-bottom:1px solid #ddd;} :where(#section-c2, .section-c2) .popup .box .share_wrap .share_box.type01 .sns_btn_box button {display:block; margin:0 auto;} :where(#section-c2, .section-c2) .popup .box .share_wrap .share_box.type01 .sns_btn_box img {display:block;} :where(#section-c2, .section-c2) .popup .box .share_wrap .share_box.type01 .copy_box {margin: 0; padding:10px 0; border: 0; border-bottom: 1px solid #ddd;} :where(#section-c2, .section-c2) .popup .box .share_wrap .share_box.type01 .copy_box .btn_copy {display:block; position: static; margin:0 auto; width:0; height:0; overflow:hidden; padding:20px 24px 0 0; background:url("/img/artinfo/common/circleCopy.png") no-repeat center center;} :where(#section-c2, .section-c2) .popup .box .share_wrap .share_box.type01 .copy_box input {padding:10px 15px; outline:none; font-weight:300;} :where(#section-c2, .section-c2) .popup .box .share_wrap .share_box.type01 .copy_box input[type="text"] {display:none;} :where(#section-c2, .section-c2) .popup .box .share_wrap .share_box.type01 .copy_box input:disabled {color:#7a7a7a; background-color:#fff;} @media (max-width: 1450px) { :where(#section-c2, .section-c2) .popup{max-width: 512px; width: 95%; height: 95%; position: fixed; left:50%; top:50%; transform: translate(-50%, -50%); z-index: 99;} :where(#section-c2, .section-c2) .popup .popup_close{top: 10px; right: 10px;} .guide_popup .guide_popup_btn{justify-content: center;} :where(#section-c2, .section-c2) .popup h3{font-size: 20px;} :where(#section-c2, .section-c2) .popup .view{font-size: 16px;} :where(#section-c2, .section-c2) .popup .popup_img{position: relative; padding-top: 0; height: 380px; background: #f0f0f0;} :where(#section-c2, .section-c2) .popup .popup_close{padding: 40px 40px 0 0; background-size: auto 100%; } :where(#section-c2, .section-c2) .popup .popup_img{height: 266px;} :where(#section-c2, .section-c2) .popup{padding: 30px;} :where(#section-c2, .section-c2) .popup .popup_content .box{margin-top: 15px;} :where(#section-c2, .section-c2) .popup .box{} :where(#section-c2, .section-c2) .popup .popup_content{height: 87%; overflow: auto;} :where(#section-c2, .section-c2) .popup .box .want span{font-size: 16px;} :where(#section-c2, .section-c2) .popup .popup_text dl{display:flex;font-size:14px;} :where(#section-c2, .section-c2) .popup .popup_text dl dt{width:50px} :where(#section-c2, .section-c2) .popup .popup_text dl dd{width:calc(100% - 50px)} .culture_map_container .culture_map .popup_bg{z-index:4!important} .popup_bg {display: none;position: fixed;left: 0;right: 0;bottom: 0;top: 0;background: rgba(0, 0, 0, .5);z-index: 10;} :where(#section-c2, .section-c2) .popup.open{width:90%} } @media all and (max-width: 370px) { :where(#section-c2, .section-c2) .culture_map .popup{width:100%} } .markersInfow { } .markersInfow .icon {width:40px;height:40px;border-radius:20px;display:block; } .markersInfow .icon.on { } .markersInfow.type-DISPLAY {} .markersInfow.type-EDUCATION {} .markersInfow.type-FESTIVAL {} .markersInfow.type-PERFORMANCE {} .markersInfow.type-PERFORMANCE .icon{background:#f19c5a url(/img/artinfo/common/icon_cate01_w.png) center center no-repeat;background-size:20px} .markersInfow.type-DISPLAY .icon{background:#2a7db9 url(/img/artinfo/common/icon_cate02_w.png) center center no-repeat;background-size:20px} .markersInfow.type-FESTIVAL .icon{background:#377733 url(/img/artinfo/common/icon_cate03_w.png) center center no-repeat;background-size:20px} .markersInfow.type-EDUCATION .icon{background:#E31C93 url(/img/artinfo/common/icon_cate04_w.png) center center no-repeat;background-size:20px} .markersInfow.type-DISPLAY .icon.on {background-color:#000000; } .markersInfow.type-EDUCATION .icon.on {background-color:#000000; } .markersInfow.type-FESTIVAL .icon.on {background-color:#000000; } .markersInfow.type-PERFORMANCE .icon.on {background-color:#000000; } .markersInfow .count {display:flex;align-items:center;justify-content: center;width:18px;height:18px;font-size:13px;border:2px solid #000;color:#000;background:#fff;border-radius:100%;} .search_box .btn-icon-reduction { transform: rotate(180deg); left:5px} .search_box.active .btn-icon-reduction { transform: rotate(0deg); }