@charset "utf-8";
/* 게시판 기본 버튼스타일 */
.bbs_btn {text-align: right; margin:20px 0;} 
.bbs_btn a{display:inline-block; margin:0 2px 6px 2px; vertical-align:middle; border-radius: 10px; transition: 0.3s ease-out;} 
.bbs_btn .bbs_bt1{background: var(--bg3); color: var(--color4); padding:10px 30px } 
.bbs_btn .bbs_bt1:hover, .bbs_btn .bbs_bt1:focus {background:var(--point);} 
.bbs_btn .bbs_bt2 {background: var(--point); color:#fff; padding:10px 30px } 
.bbs_btn .bbs_bt2:hover, .bbs_btn .bbs_bt2:focus {background:var(--bg3); } 
.bbs_btn .bbs_bt3 {background:var(--bg2); padding:10px 30px } 
.bbs_btn .bbs_bt3:hover, .bbs_btn .bbs_bt3:focus {background:var(--bg3); color: var(--color4);} 
.bbs_btn .bbs_bt4 {border: 1px var(--line) solid; padding: 10px 30px; background: var(--bg4);} 
.bbs_btn .bbs_bt4:hover, .bbs_btn .bbs_bt4:focus {border-color: var(--point); color: var(--point);} 
.bbs_btn input[type=submit] {margin:0 2px 6px 2px; background: var(--point_red); color:#fff; height: 54px; padding: 0 30px;vertical-align:middle;cursor: pointer;font-size: 18px; border-radius: 10px;} 
.bbs_btn input[type=submit]:hover, .bbs_btn input[type=submit]:focus { background:var(--black1); } 

.btn_bbsw{display: inline-block; height: 40px; margin:2px 0 2px 3px; padding: 10px; background: var(--point); font-size:15px; vertical-align: middle; line-height: 1.5em; color:#fff; white-space:nowrap; border-radius: 10px;} 
.btn_bbsw:hover,.btn_bbsw:focus{color:#fff; background:var(--bg3);} 

/* 게시판 기본 검색스타일 */
.bbs_total{margin:10px 0;} 
.bbs_total strong{color: var(--point); font-weight:500; vertical-align:top;} 
.bbs_search{margin: 0 0 20px;}
.bbs_search input,.bbs_search select{display: inline-block; height: 40px; margin: 2px 0; padding: 0 10px; border: 1px var(--line) solid; border-radius: 10px;}
.bbs_search input[type="submit"],.bbs_search input[type="button"]{padding: 0 10px; background: var(--point); color: #fff; border: 1px var(--point);}
.bbs_search input[type="submit"]:hover,.bbs_search input[type="button"]:hover{background: var(--bg3);}
.bbs_search.bbs_search2{padding: 20px; background: var(--bg2); text-align: center; border-radius: 10px;}

@media all and (min-width:768px) {
.bbs_search .flex{display: flex; justify-content: space-between;}
}

/* 게시판 기본 페이징 */
.bbs_page{text-align:center; margin:25px 0}
.bbs_page a{display:inline-block; width: 40px; height: 40px; padding:10px 0 0 0; margin:0 4px 4px; line-height: 1.25em; border-radius: 10px; border:1px var(--line) solid;}
.bbs_page a:hover,.bbs_page a:focus{border:1px var(--bg3) solid;}
.bbs_page a.on{font-weight:500; color:#fff; background:  var(--bg3);}
.bbs_page .prev{font-size:0;overflow:hidden;background: url("/images/citizencard/bbs/ico_bbs_page.png") no-repeat center -31px;}
.bbs_page .prev2{font-size:0;overflow:hidden;background: url("/images/citizencard/bbs/ico_bbs_page.png") no-repeat center 3px;}
.bbs_page .next{font-size:0;overflow:hidden;background: url("/images/citizencard/bbs/ico_bbs_page.png") no-repeat center -63px;}
.bbs_page .next2{font-size:0;overflow:hidden;background: url("/images/citizencard/bbs/ico_bbs_page.png") no-repeat center -96px;}

/* 게시판 기본 쓰기 스타일 */
.bbs_comment{margin:15px 0;} 
.w_star{color: #e01275;} 
.txt_cm{color: var(--point); display: inline-block;} 
.txt_cm:before{content:""; display:inline-block; width: 20px; height: 20px; background: url("/images/citizencard/common/ico_common_info.png") no-repeat; background-position: 0 0; margin:0 5px 0 0; vertical-align: middle; } 
.input_wss{width:40px;} 
.input_ws{width:100px;} 
.input_wm{width:150px;} 
.input_wl{width:90%;} 
.input_wf{width:100%;}  
.input_h{width:50%;} 
.txt_cal{background: url("") no-repeat; background-position: 8px 16px; padding-left:32px !important;} 

/* 게시판 이미지 기본 설정 */
.bbs_img{margin: 0; text-align: center;}
.bbs_img img,.bbs_skin img{width: auto; max-width: 100%;}

.bbs_write {width:100%; margin:10px 0; border-left:2px solid #fff; border-right:2px solid #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);} 
.bbs_write th, .bbs_write td {padding: 10px; border-bottom: 1px solid var(--line); border-top:none; vertical-align:middle; line-height:1.5em;} 
.bbs_write th {text-align: left; background: var(--bg2); word-break: keep-all;} 
.bbs_write td *{vertical-align: middle;} 
.bbs_write input{height: 40px; padding: 10px 0; margin:2px 0; border-radius: 10px; border: 1px var(--line) solid;} 
.bbs_write input[type=checkbox],.bbs_write input[type=radio]{width: 20px; height: 20px;} 
.bbs_write .bw_file{margin:2px 0; } 
.bbs_write .bw_file input[type=file]{width:100%; height: auto; padding:10px; } 
.bbs_write .bw_file .memoarea{display:block;} 
.bbs_write .bw_file .memoarea em{display:inline-block; margin-right: 10px; font-style: normal;} 
.bbs_write .bw_file .memoarea input[type=text]{width: calc(100% - 90px);}
.bbs_write textarea{border: 1px var(--line) solid; border-radius: 10px;} 
.bbs_write select{display: inline-block; padding: 8px 0; margin:2px 0; height: 40px; border: 1px var(--line) solid; border-radius: 10px;} 
.bbs_write td label{margin:0 10px 0 0;} 


@media all and (min-width:768px) {
.txt_cal{width:200px;}
.bbs_write th, .bbs_write td{height: 46px; padding: 20px;} 
}

/* 게시판 기본 목록 스타일 */
.adm_check{width: 20px;height: 20px;margin: 5px;vertical-align:middle;} 
.sel_check{width:20px; height:20px; margin:10px } 
.list_none{text-align:center; padding:20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin:0 0 30px 0 } 

.bbs_table{width:100%; min-width:800px; border-left:2px solid #fff; border-right:2px solid #fff;border-top: solid 1px var(--line);} 
.bbs_table .ico_noti{color:var(--point); font-weight:500;} 
.bbs_table th,.bbs_table td {padding: 20px 10px; border-bottom: 1px solid var(--line); border-top: none; vertical-align: middle; text-align:center; line-height:1.5em;} 
.bbs_table tr:hover {background:var(--bg2);} 
.bbs_table tbody tr{padding: 0;}
.bbs_table th {border-bottom: 1px solid var(--line);} 
.bbs_table td.title{margin-bottom: 0; text-align:left;} 
.bbs_table td.title a:hover,.bbs_table td.title a:focus{font-weight: 500;} 
.bbs_table td.file a img{vertical-align: middle;}
@media all and (max-width:1023px) {
.bbs_table{min-width: auto;}
.bbs_table col{width:100% !important;} 
.bbs_table thead{display:none;} 
.bbs_table tbody tr{display: inline-block; padding: 10px; border-bottom: 1px var(--line) solid;}
.bbs_table tbody td{display: inline-block; padding: 3px 6px; border-bottom: 0; font-size: 16px; text-align: left;}
.bbs_skin table [data-cell-header]:before{content:attr(data-cell-header);display:inline-block; color:var(--color1); padding-right:5px}
.bbs_table td.title{margin-bottom: 10px; padding: 10px 0; border-bottom: 1px var(--line) dashed;}
.bbs_table td.title:before{display: none;}
}
@media all and (max-width:360px) {
.bbs_table tbody td{display: block; padding: 3px 0;}
}

@media all and (min-width:1023px) {
.bbs_table{table-layout:fixed;} 
.bbs_table td.title a{display:block; width:100%; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;} 
}

/* 게시판 기본 보기 스타일 */
.bbs_view .bbs_vtop h4{font-size: 24px; font-weight: 600; color: #111;}
.bbs_vtop .col{padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px var(--line) solid;}
.bbs_vtop .col li{display: inline-block; line-height: 1.3em;}
.bbs_vtop .col li::after{content: ''; display: inline-block; width: 2px; height: 16px; margin: 0 10px; background: var(--line); line-height: 1.3em; vertical-align: middle;}
.bbs_vtop .col li:last-of-type::after{display: none;}
.bbs_vtop .col li strong{color: var(--black2);}
.bbs_con{padding-bottom: 40px;}

.bbs_filedown{border-radius: 10px; margin: 20px 0; border: 1px var(--line) solid;}
.bbs_filedown ul{padding: 20px;}
.bbs_filedown li{display:flex; flex-wrap: wrap; text-align:left; align-items: center; margin: 0 0 8px;}
.bbs_filedown li:last-of-type{margin: 0;}
.bbs_filedown li a{display: inline-block; margin-right: 10px;}

@media all and (min-width:768px) {
.bbs_filedown dt{display:table-cell; width: 15%; border-right: solid 1px var(--black1); border-bottom:0; padding:0;}
.bbs_filedown dd{margin: 0 0 8px 3%; align-items: center;}
.bbs_filedown dd:last-of-type{margin: 0 0 0 3%;}
.bbs_filedown dd a{margin: 0 4px;}
}
@media all and (min-width:1023px) {
.bbs_view .bbs_vtop h4{font-size: 32px;} 
.bbs_filedown dt{width: 10%;}
}

.bbs_vtop .tt_list{margin-bottom: 30px; border-top: 1px solid var(--line);}
.bbs_vtop .tt_list li{border-bottom: 1px solid var(--line);display:table;width:100%;}
.bbs_vtop .tt_list strong{display:table-cell;padding:20px 10px;background: #f6f9ff; width:40%;text-align:center;vertical-align:middle;}
.bbs_vtop .tt_list span{display:table-cell;padding:20px 10px;text-align:left;vertical-align:middle;}

@media all and (min-width:768px){
.bbs_vtop .tt_list{overflow:hidden}
.bbs_vtop .tt_list li{float:left;width:50%}
.bbs_vtop .tt_list li.line1{width:100%}
.bbs_vtop .tt_list li.line1 strong{width:20%}
}

/* 포토 목록 스타일 */
.photo_list li{margin:0 0 20px 0;text-align:center; }
.photo_list li a{display:block; border-radius: 10px; border: 1px var(--line) solid; overflow: hidden;}
.photo_list .img{display: block; overflow:hidden; position:relative; width: 100%; background: var(--bg2); transition: 0.5s ease-out;}
.photo_list .img img{width:100%}
.photo_list .date{display:block; padding:20px 10px; color:var(--color1); border-radius: 0 0 10px 10px; font-size: 14px;}
.photo_list strong{display:block; width: 100%; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; color: #333; font-size: 20px;}
.photo_list li a:hover,.photo_list li a:focus{border-color: var(--point);}
@media all and (min-width:768px) {
.photo_list ul{display: flex; flex-wrap: wrap; gap: 20px 2%;}
.photo_list li{width:49%; margin: 0;}
.photo_list .img img{width: auto; height: 240px;}
}
@media all and (min-width:768px) {
.photo_list li{width:32%;}
}

/* 포토 상세보기 스타일 */
.photo_view{position: relative; margin-bottom: 20px;}
.photo_view figure{margin: 0;}
.photo_view .photo_viewlist{padding: 30px 20px 90px 20px; text-align: center; background: var(--bg2); border-radius: 10px;}
.photo_view .photo_viewlist img{display: inline-block; width: auto; max-width: 100%; margin-bottom: 10px;}
.photo_view .photo_viewlist figcaption{color: var(--color1);}
.photo_view .photo_viewbtn span{display: inline-block; position: absolute; bottom: 30px; left: 50%; transform: translate(-50%, 0); border-radius: 5px; padding: 6px 18px; text-align: center; background: var(--bg4);}
.photo_view .photo_viewbtn span strong{display: inline-block; vertical-align: baseline; font-size: 17px;}
.photo_view .photo_viewbtn button{position: absolute; top: 40%; display: inline-block; width: 40px; height: 40px; border-radius: 5px; background: var(--bg4) url('/images/citizencard/common/btn_ico.png') no-repeat; background-position: 50% 14px; font-size: 0;}
.photo_view .photo_viewbtn button.prev{left: 10px; transform: rotate(-180deg);}
.photo_view .photo_viewbtn button.next{right: 10px;}
@media all and (min-width:768px) {
.photo_view .photo_viewlist{padding: 30px 100px 90px 100px; }
.photo_view .photo_viewbtn button{top: 48%;}
.photo_view .photo_viewbtn button.prev{left: 40px;}
.photo_view .photo_viewbtn button.next{right: 40px;}
}


/* 가맹점 보기 */
.store_view .store_vtop{display: flex; flex-direction: column; gap: 20px 0; margin-bottom: 30px;}
.store_view .store_vtop img{width: 100%;}
.store_view .store_vtop .tit{margin-bottom: 20px; font-size: 26px; font-weight: 600;}
.store_view .store_vtop .info ul li{margin: 0 0 10px;}
.store_view .store_vtop .info ul li strong{display: inline-block; width: 80px; color: var(--color3); font-weight: 400; }
.store_view .store_map{margin-bottom: 40px; border: 1px var(--line) solid; border-radius: 10px;}
@media all and (min-width:768px) {
.store_view .store_vtop{flex-direction: row; gap: 0 30px; margin-bottom: 50px;}
.store_view .store_vtop img{width: 400px;}
.store_view .store_vtop .info{margin-top: 60px;}
.store_view .store_vtop .tit{margin-bottom: 40px; font-size: 32px;}
.store_view .store_vtop .info ul li{margin: 0 0 16px; font-size: 18px;}
}
@media all and (min-width:1023px) {
.store_view .store_vtop{gap: 0 60px;}
.store_view .store_vtop img{width: 600px;}
}
@media all and (min-width:1400px) {
.store_view .store_vtop img{width: 800px; height: 550px;}
}

/* 시민증발급 개인정보동의 및 개인정보 등록 */
.personal_view .agree_box{padding: 10px 20px; margin-bottom: 30px;border: 1px var(--line) solid; border-radius: 10px;}
.personal_view .agree_box h5{margin-top: 0;}
.personal_view .agree_box ul{margin-bottom: 10px;}
.personal_view .agree_box ul li{position: relative; line-height:1.5em;padding:0 0 0 12px;margin:0 0 5px 0;}
.personal_view .agree_box ul li::before{content: ''; display: block; position: absolute; top: 8px; left: 0; width: 6px; height: 6px; background: var(--point); border-radius: 20px;}
.personal_view .agree_box p{margin-bottom: 20px;}
.personal_view .agree_txt{padding: 16px 20px; margin-bottom: 0 !important; margin-top: 20px; text-align: center; background: var(--bg2);}
.personal_view .agree_txt label{display: inline-block; margin-right: 10px; word-break: keep-all;}
.personal_view .agree_txt input[type=checkbox]{width: 20px; height: 20px;}
.personal_write ul{border-top: 1px var(--point) solid;}
.personal_write ul li{display: flex; flex-wrap: wrap; gap: 0 10px; padding: 10px; border-bottom: 1px var(--line) solid;}
.personal_write ul li strong{display: block; width: 100px; text-align: center;  align-self: center; flex-shrink: 0;}
.personal_write ul li input[type=text]{display: block; width: calc(100% - 120px); height: 40px; align-self: center; border:1px var(--line) solid; border-radius: 10px; flex-grow: 1;}
.personal_write ul li div{width: calc(100% - 120px);}
.personal_write ul li select{display: block; width: 100%; margin: 4px 0;}
@media all and (min-width:768px) {
.personal_view .agree_box{padding: 40px;}
.personal_write ul{display: flex; flex-wrap: wrap;}
.personal_write ul li{width: 50%; padding: 20px;}
}
@media all and (min-width:1400px) {
.personal_view{max-width: 1200px; margin: 0 auto;}
.personal_write ul li.tell{width: 100%;}
.personal_write ul li.tell input[type=text]{ width: 320px; flex-grow: 0;}
.personal_write ul li.add{width: 100%;}
.personal_write ul li select{display: inline-block; width: auto;}
}
/* 시민증발급 결과화면 */
.personal_result{padding: 50px 20px 300px 20px; border-radius: 20px; background: var(--bg1) url('/images/citizencard/bbs/bbs_character.png') no-repeat center bottom 20px; text-align: center;}
.personal_result p{margin-bottom: 10px; font-size: 18px; word-break: keep-all;}
.personal_result .txt1{color: var(--point);}
.personal_result .tit strong{display: inline-block; margin-right: 4px; font-size: 28px; font-weight: 600; color: #111;}
.personal_result .bbs_btn a{width: 200px; font-size: 16px;}
@media all and (min-width:1400px) {
.personal_result{padding: 100px 0 300px; z-index: 0;}
.personal_result p{font-size: 20px; z-index: 2;} 
.personal_result .bbs_btn{margin-top: 30px;}
.personal_result .tit strong{font-size: 30px;}
}

/* 마이페이지 시민증 */
.card_wrap .card_con{max-width: 400px; height: 600px; padding: 20px 30px 0; margin: 0 auto 40px; background: #00479d url('/images/citizencard/bbs/card_bg.png') no-repeat bottom center;}
.card_wrap .card_con .logo{display: flex;justify-content: flex-end;align-items: center;color: var(--color4);}
.card_wrap .card_con .logo img{display:none;}
.card_wrap .card_con h4{position: relative;height: 40px;margin-top: 75px;background: url('/images/citizencard/bbs/card_tit.png') no-repeat center;background-size: 100%;font-size: 0;}
.card_wrap .card_con h4:before{content:'';display:block;position: absolute;top: -46px;width: 195px;height: 35px;background: url('/upload_data/user_file/citizencard/bbs/card_logo2.png')  no-repeat;}
.card_wrap .card_con .name{display: flex; justify-content: space-between; align-items: flex-end; max-width: 313px; margin: 0 auto 30px; color: var(--color4);}
.card_wrap .card_con .name strong{font-size: 34px;}
.card_wrap .card_con .qr{display: flex; gap: 0 14px; max-width: 313px; margin: 0 auto; align-items: center; color: var(--color4);}
.card_wrap .card_con .qr .img{width: 80px;height: 80px;flex-shrink: 0;border-radius: 10px;background: var(--bg4);}
.card_wrap .card_con .qr .txt{flex-grow: 1; word-break: keep-all; line-height: 1.2em;}
@media all and (min-width:400px) {.card_wrap .card_con h4{background-size: auto;}}
.card_wrap .card_info{max-width: 560px; margin: 0 auto; padding: 40px 0; border-radius: 10px; border: 1px var(--line) solid;}
.card_wrap .card_info h5{text-align: center; margin-top: 0; margin-bottom: 20px;}
.card_wrap .card_info ul {width: 280px; margin: 0 auto;}
.card_wrap .card_info ul li{position: relative; padding-left: 14px;}
.card_wrap .card_info ul li::after{content: ''; display: block; position: absolute; top: 10px; left: 0; width: 6px; height: 6px; background: var(--point); border-radius: 50%;}
.card_wrap .card_info ul li strong{display: inline-block; margin-right: 10px; font-weight: 500;}
.card_wrap .card_info ul li span{color: var(--color3);}
.card_wrap .card_info .bbs_btn form{display:inline-block;}
.card_wrap .card_info .bbs_btn{margin-bottom: 0;text-align: center;}
@media all and (min-width:1200px) {
.card_wrap{display: flex; justify-content: center; gap: 0 60px;}
.card_wrap .card_con{margin-bottom: 0;}
.card_wrap .card_info{align-self: flex-start; margin: 0; padding: 60px 40px;}
.card_wrap .card_info h5{text-align: left;}
.card_wrap .card_info ul {width: auto; margin: 0 0 270px;}
}                   

.sms_box{display:inline-block;padding: 20px;background: var(--bg2);border-radius: 10px;}
.sms_box h5{margin-top:0;}
.sms_box textarea{display: block;width:300px;margin-bottom: 15px;border:1px var(--line) solid;}
.sms_box button{display: block;margin: 0 auto;}
.sms_box input[type="submit"]{display: block;height: 40px;margin: 0 auto;padding: 10px;background: var(--point);font-size:15px;vertical-align: middle;line-height: 1.5em;color:#fff;white-space:nowrap;border-radius: 10px;} 
.sms_box input[type="submit"]:hover,.sms_box input[type="submit"]:focus{color:#fff; background:var(--bg3);}        


/* 자주묻는질문 Q&A */
.faq_list{border-top: 1px solid var(--line);}
.faq_list li>a{display:block;position: relative;border-bottom:1px solid var(--line);padding:25px 20px 25px 70px;}
.faq_list li>div{position:relative;padding:25px 20px 25px 70px;background: var(--bg1);}
.faq_list li>div .bbs_btn{margin:20px 0 0 0}
.faq_list li.on>div{display:block;}
.faq_list li pre div{display: block !important;}
.faq_list em{position: absolute;top: 22px;left: 20px;display:block;width: 32px;height: 32px;line-height: 32px;border-radius: 50%;background: var(--point);color: #fff;font-style: normal;font-size: 15px;font-weight: 500;text-align: center;}
.faq_list div em{background: #fff; border: 1px var(--point) solid; color: var(--point); }
.faq_list div *{font-family: 'NexonLv2Gothic' !important;}
.faq_list li>a:hover,.faq_list li>a:focus{color: var(--point);}