@charset "utf-8";
/*
	-----------------------------------------------
	* sub03.css (포털 서브 콘텐츠)
	-----------------------------------------------
*/

@font-face {
    font-family: 'Jalnan';
    font-weight: normal;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/goodchoice/Jalnan.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/goodchoice/Jalnan.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/goodchoice/Jalnan.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/goodchoice/Jalnan.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/goodchoice/Jalnan.ttf') format("truetype");
    font-display: swap;
}


/* ******* 시정소식지 버튼 스타일 *******  */
.btn.view {position:relative; color:#355fe1; padding:.4rem 3rem .4rem 1rem !important; border:1px solid #255fe1 !important; border-radius:3px;}
.btn.view:after {content:''; position:absolute; top:6px; right:10px; width:13px; height:13px; background:url(/portal/img/common/ico_board_view.png) no-repeat;}
.btn.view:hover {color:#fff; background:#355fe1 !important; border:1px solid #255fe1 !important; text-decoration:none;}
.btn.view:hover:after {background-position:0 -28px;}

/* 시정백서 */
.gc_book_list {position:relative; overflow:hidden;}
.gc_book_list li {width:24%; padding:15px; margin-right:1.333%; margin-bottom:15px; text-align:center; border:1px solid #ddd;box-sizing:border-box;float:left;}
.gc_book_list.sw32 li {width: 32%;}
.gc_book_list li > p {font-size:20px !important; font-weight:bold; color:#3a81dc !important; border-bottom:1px solid #ddd; padding-bottom:10px}
.gc_book_list li:nth-child(4n) {margin-right:0;}
.gc_book_list.sw32 li:nth-child(3n) {margin-right:0;}
.gc_book_list.sw32 li:nth-child(4n) {margin-right:1.333%;}
.gc_book_list .img_sec {max-width: 200px; height: 265px; text-align:center; margin:0 auto; overflow:hidden;}
.gc_book_list .btn_sec {position:relative; margin-top:30px;}

/* 생활안내 */
.box-life {position:relative; padding:40px 40px 40px 240px; margin:60px 0 50px 30px; background:#e8f4f7; border-radius:0 0 20px 0;}
.box-life .img-view {position:absolute; box-shadow:8px 8px 16px rgba(0,0,0,0.15); top:-30px; left:-30px;}
.box-life .img-view:hover:before {content:''; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background:rgba(0,0,0,0.5) url(/portal/img/content/03/sub0305_img02.png) no-repeat center center;}
.box-life .img-view img {display:block;}
#conts .box-life .sub_tit {margin-bottom:1.7rem; font-size:2rem; font-weight:600; color:#3a81dc;}
.box-life .bottom-wrap {margin-top:40px;}

@media all and (max-width:1024px){
	/* 시정백서 */
	.gc_book_list li {width:49%; text-align:center; margin-right:2%; margin-bottom:15px;}
	.gc_book_list.sw32 li {width:49%;}
	.gc_book_list.sw32 li:nth-child(3n) {margin-right:2%;}
	.gc_book_list li:nth-child(even) {margin-right:0 !important;}

}

@media all and (max-width:640px){
	/* 시정백서 */
	.gc_book_list li {width:100%; text-align:center; margin-right:0 !important; margin-bottom:15px;}
	.gc_book_list.sw32 li {width:100%;}
	.gc_book_list .img_sec {height:230px;}
	.gc_book_list .img_sec img {height:100%;}

	/* 생활안내 */
	.box-life {padding:310px 30px 40px; margin:60px 0 40px;}
	.box-life .img-view {left:50%; margin-left:-112.5px;}
	#conts .box-life .sub_tit {font-size:1.7rem;}
	.box-life .bottom-wrap {text-align:center;}
}


/* 2024 과천시 달라지는 제도  */

.change2024 {width:100%; position:relative; padding:40px 35px; background:#FFFEEC url(../img/content/03/change2024_bg.svg) no-repeat top right 40px; background-size:510px auto; word-break:keep-all;}
.change2024 .title {max-width:50%; text-align:center; font-family:'Jalnan'; font-size:24px; font-weight:900; line-height:1.3; padding:30px 0 60px}
.change2024 .title span {display:block;}
.change2024 .title span:nth-child(2) {color:#EC2C71; font-size:32px;}
.change2024 .con {padding:30px; border:1px solid #eee; border-top:3px solid #EF4A86; background:#fff;}
.change2024 dl {width:100%; display:block; position:relative; padding-bottom:30px;}
.change2024 dl + dl {border-top:1px dashed #ddd; padding-top:30px;}
.change2024 dt {display:block; font-weight:700; font-size:24px;  color:#EF4A86; line-height:1.2; }
.change2024 dd {display:block; padding:20px 0 0;}
.change2024 dd > ul > li {position:relative; padding-left:14px;}
.change2024 dd > ul > li:before {content:''; position:absolute; left:0; top:5px; width:8px; height:8px; border-radius:4px; border:2px solid #EF4A86; }
.change2024 dd > ul > li li {position:relative; padding-left:10px; color:#555;}
.change2024 dd > ul > li li:before {content:''; position:absolute; left:0; top:6px; width:4px; height:4px; background:#bbb;}
.change2024 dd li {line-height:1.3;}
.change2024 dd li + li {margin-top:10px;}
.change2024 dd li ul {padding:15px 0 5px;}
.change2024 dd span {display:block; font-size:15px; color:#777; margin-top:20px;}


@media all and (max-width:1024px) {
	.change2024 .title {max-width:100%; padding:0 0 220px;}
	.change2024 {background-position:top 100px center;}
}

@media all and (max-width:768px) {
	.change2024 .title {padding:0 0 160px;}
	.change2024 {background-position:top 110px center; background-size:380px auto;}
}

@media all and (max-width:640px) {
	.change2024 {padding:30px 15px; background-position:top 130px center; background-size:360px auto;}
	.change2024 dt {font-size:20px;}
	.change2024 .title {font-size:20px;}
	.change2024 .title span:nth-child(2) {font-size:28px;}
	.change2024 .con {padding:20px;}
	.change2024 dl {padding-bottom:10px;}
	.change2024 dl + dl {padding-top:20px;}
	.change2024 dd {padding:15px 0;}
	.change2024 dd li ul {padding:10px 0 5px;}
}



/* 행사일정 */
.reservCalendar .state {text-align:right;}
.reservCalendar .state span {display:inline-block; padding:.5em .75em;}
.reservCalendar .state .reservClose { background:#ddd; color:#777; border:1px solid #ddd;}
.reservCalendar .state .dateSelect {border:1px solid #ff2949;}

.reservCalendar .calendarWrap::after {content:""; clear:both;}
.reservCalendar .calendarHead {text-align:center;}
.reservCalendar .calendarHead span {display:inline-block; padding:0 12px; font-weight:800; font-size:2rem; color:#10293b; line-height:2.8rem; vertical-align:middle; font-family:'Montserrat', sans-serif;}
.reservCalendar .calendarHead span em {font-size:2.8rem; color:#10293b;}
.reservCalendar .calendarHead a {display:inline-block; height:34px; line-height:34px; box-sizing:border-box;transition: 0.3s;vertical-align:middle}
.reservCalendar .calendarHead a.month {width:34px; text-indent:-9999px;}
.reservCalendar .calendarHead a.prev { background:url('/common/yhdcalendar-1.2/img/btn_prev_month.png') 50% 50% no-repeat;}
.reservCalendar .calendarHead a.next { background:url('/common/yhdcalendar-1.2/img/btn_next_month.png') 50% 50% no-repeat;}
.reservCalendar .calendarHead a.today {padding:0 10px; font-weight:400; color:#363c5a !important; margin-left: 5px;  border:1px solid #c5c9d6; border-radius:4px;}

.reservCalendar .calendar ul {width:100%; margin:19px auto 0; border-top:2px solid #283140; overflow:hidden;}
.reservCalendar .calendar li {float:left; width:14.285%; border-right:1px solid #ccc; border-bottom:1px solid #dedede; box-sizing:border-box;}
.reservCalendar .calendar .th {height:40px; font-weight:600; line-height:40px; text-align:center;}
.reservCalendar .calendar .td {height:80px; padding:5px;}
.reservCalendar .calendar .td1 {border-left:1px solid #ccc;}
.reservCalendar .calendar .td1 > span,.calendar li.td1 > a {color:#ff765e;}
.reservCalendar .calendar .td7 > span,.calendar li.td7 > a {color:#00bfc2;}
.reservCalendar .calendar .today{background:#f7f7f7;}
.reservCalendar .calendar .today{font-weight:400; color:#363c5a;}
.reservCalendar .calendar .today .schedule{font-weight: normal;}
.reservCalendar .calendar .holiday,.calendar .holiday > p {color:#ec445b;}

.reservCalendar .calendar table {width:100%; margin:19px auto 0; border-top:1px solid #293f50; box-sizing:border-box;}
.reservCalendar .calendar th,
.reservCalendar .calendar td {font-size:14px; border-bottom:1px solid #c5c9d6; position:relative; padding:1.5rem 1.5rem;}

.reservCalendar .calendar th {width:14%; height:54px; color:#10293b; vertical-align:middle; font-weight:600; line-height:1.2; font-size: 15px; text-align:center; font-family:'Montserrat', 'Spoqa Han Sans Neo', 'Noto Sans KR', 'Malgun gothic', '맑은고딕', sans-serif;}
.reservCalendar .calendar thead th + th {background:url('img/bak_thead_line.png') no-repeat 0 50%;}
.reservCalendar .calendar th:first-child {color:#ff1f1f; }
.reservCalendar .calendar th:last-child {color:#216cda;}
.reservCalendar .calendar th span {font-size:1.2rem; margin-left:3px;}

.reservCalendar .calendar td:hover,
.reservCalendar .calendar td:focus {background:#f1f9fd;}
.reservCalendar .calendar td.on {background:#0050a9;}
.reservCalendar .calendar td.on >span {color:#fff;}
.reservCalendar .calendar td {height:80px; padding:2rem; vertical-align:top;font-weight: 400;color: #363c5a;}
#conts .reservCalendar .calendar td:first-child p {color:#ff1f1f;}
#conts .reservCalendar .calendar td:last-child p {color:#216cda;}
.reservCalendar .calendar td a > p {margin-bottom:.25em;}
.reservCalendar .calendar td div > p { font-size:1.1112em; color:#333 !important; margin-bottom:.25em;}
.reservCalendar .calendar td div span {color:#3a81dc; font-size:1.25em;}
.reservCalendar .calendar td div em {color:#333; font-size:1.25em;}
.reservCalendar .calendar td.today > p,
.reservCalendar .calendar td.today a > p {display:inline-block; width:1.5em; height:1.5em; background:#3a81dc; color:#fff !important; text-align:center; border-radius:2em;}
.reservCalendar .calendar td.select:after {content:''; position:absolute; top:0; left:0; bottom:0; right:0; border:1px solid #ff2949;}
.reservCalendar .calendar td.close {background:#ddd;}
.reservCalendar .calendar td.close * {color:#777;}
.reservCalendar .calendar td.holiday, 
.reservCalendar .calendar td.holiday * {color:#ec445b !important;}

.reservCalendar .summary {margin-top:3em;}

.roll_over td[id^="yhdc"]:hover{background: #f1f9fd;}



@media screen and (max-width:720px){
	.reservCalendar .calendar td {padding:1rem;}
}

@media all and (max-width:640px) {
    .reservCalendar .state { text-align:center; margin-top:1em;}
}


@media screen and (max-width:480px){
.reservCalendar .calendar li {font-size:12px;}
.reservCalendar .calendar .th span span {display:none;}
.reservCalendar .calendar th span {display:none;}
.reservCalendar .calendar th {font-size:13px;}
.reservCalendar .calendar td {font-size:12px;}
.reservCalendar .schedule a {background:none; padding-left:0; background:#f3f3f3;}
}


/* 과천 영상자료실 배너 */
.imgVideo {position:relative; width:100%; padding:2em 1em; border-radius:1.5em; background:#FFE071; text-align:center;}
.imgVideo .txt {position:relative; display:inline-block; z-index:10;}
.imgVideo .txt:before {content:''; position:absolute; left:-3em; top:-.75em; width:85px; height:110px; background:url(../img/content/03/0202_obj03.svg) no-repeat top center; background-size:100% auto;}
.imgVideo .txt:after {content:''; position:absolute; right:-3em; bottom:1em; width:62px; height:95px; background:url(../img/content/03/0202_obj04.svg) no-repeat top center; background-size:100% auto;}
#conts .imgVideo .txt p {font-size:1.5em; line-height:1.2; font-weight:700; color:#333; margin-bottom:.5em;}
.imgVideo .txt a {display:inline-block; color:#fff; font-weight:700;background:#EF3636; border-radius:2em; padding:.75em 1.5em;}
.imgVideo .txt a span {display:inline-block; padding-left:1.75em; position:relative;}
.imgVideo .txt a span:before {content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1.5em; height:1.5em; background:url(../img/content/03/0202_ico_tv.svg) no-repeat center center; background-size:100% auto;}
#conts .imgVideo *[target="_blank"]:not([class]):after {content:none;}
.imgVideo .obj01 {position:absolute; left:1.5em; bottom:0; width:320px; height:144px; background:url(../img/content/03/0202_obj01.svg) no-repeat bottom center; background-size:100% auto; z-index:11;}
.imgVideo .obj02 {position:absolute; right:3em; bottom:0; width:168px; height:147px; background:url(../img/content/03/0202_obj02.svg) no-repeat bottom center; background-size:100% auto; z-index:11;}

@media all and (max-width:1024px) {
	.imgVideo .obj01 {left:1em; width:17em;}
	.imgVideo .obj02 {right:1.5em; width:9em;}
}

@media all and (max-width:768px) {
	.imgVideo {padding:2em 5em;}
	.imgVideo .txt {display:block; width:70%;}
	.imgVideo .obj01 {display:none;}
}

@media all and (max-width:648px) {
	.imgVideo {padding:2em 2em;}
	.imgVideo .txt:before,
	.imgVideo .txt:after {content:none;}
	#conts .imgVideo .txt p {font-size:1.2em;}	
}

@media all and (max-width:480px) {
	.imgVideo {padding:1.5em 1em;}
	.imgVideo .obj02 {display:none;}
	.imgVideo .txt {display:block; width:100%;}
}