@charset "utf-8";
.customMenu_search{display:none !important}
input[type=submit]{cursor:pointer;}
.wrapper{margin:auto; width:90%; max-width:1320px;}
img{max-width:100%;}
/** popup **/
.m_popup{position:absolute; top:5px; left:5px; z-index:9999; padding:1px; background:#444;}
.m_popup2{left: 660px;}
.m_popup .m_popup_tit{display:block; padding:5px 10px; color:#fff; font-weight:600;}
.m_popup .m_popup_close{display:block; overflow:hidden; padding:5px 10px 8px; background:#444; font-weight:600; color:#fff; text-align:left; font-size:14px;}
.m_popup .m_popup_close label{color: inherit;}
.m_popup .m_popup_close>p{float:left; text-align:right; color:#fff;}
.m_popup .m_popup_close>a{float:right; color:#fff;}
.m_popup .m_popup_closeW{background:#fff; color:#333}
.m_popup .m_popup_closeW>p,
.m_popup .m_popup_closeW>a{color:#333; font-weight: 500;}
.m_popup>a{display: block; line-height: 0px}

/*메인,민원_설문조사 레이어팝업 /open_content/main/poll_pop.jsp */
.pollpop {position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.5); z-index:500; overflow-y:scroll;}
.pollpop_box {position:relative; top:50%; transform:translateY(-50%); width:600px; max-width:90%; margin:0 auto; background:#fff;}
.pollpop_box a {display:block;}
.tingle-modal-box .pollpop_box {top:auto; transform:translateY(0); width:auto; max-width:none; padding-bottom:60px;}
.pollpop_ttl {padding:15px 70px 15px 50px; color:#fff; font-size:18px; font-weight:600; background:#003b99 url('/open_content/main/img2020/program/pollpop_ic.gif') no-repeat 20px center;}
.pollpop_close-top {position:absolute; right:20px; top:17px; display:block; padding-right:25px; color:#fff; font-size:13px;}
.pollpop_close-top:before, .pollpop_close-top:after {display:block; content:""; position:absolute; right:0; top:10px; width:20px; height:2px; background:#fff;}
.pollpop_close-top:before {transform:rotate(-45deg)}
.pollpop_close-top:after {transform:rotate(45deg)}
.pollpop_list {padding:25px;}
.pollpop_list>dl {padding-top:20px; margin-top:25px;border-top:1px solid #e5e5e5;}
.pollpop_list>dl:first-child {padding-top:0; margin-top:0; border-top:0;}
.pollpop_q {font-weight:600;}
.pollpop_a li {margin-top:10px;}
.pollpop_a .col li {display:inline-block; margin-right:10px;}
.pollpop_a label {font-size:14px;}
.pollpop_a input {vertical-align:middle; margin-bottom:3px;}
.subjective {width:100% !important; margin-top:5px; min-height:100px;}/*민원설문조사 팝업, 민원상담등록신고 내용부분 공통사용*/
/*민원신청 버튼 누른후 안내팝업 (/open_content/main/civil/advice/advice.jsp)*/
.civilpop_btn {text-align:center; padding:5%;}
.civilpop_btn a {display:inline-block !important; width:45%; max-width:200px; padding:50px 10px; font-weight:500; margin:10px auto;}
.civilpop_btn_member {color:#fff; background:#0148bc;}
.civilpop_btn_none {border:1px solid #ddd;}
.civilpop_close_box {text-align:center; padding-bottom:30px;}


/*상단슬라이딩팝업*/
.slpzone{position:relative; padding:20px 50px 20px 150px; height:120px; background:#fff url('/open_content/main/img2020/ic/ic77.png') no-repeat 45px center; background-size:80px; overflow-y:hidden;}
.slpzone_control{position:absolute; right:0px; bottom:20px; /* background:#65697b;  */overflow:hidden; z-index:2;}
.slpzone_control>li{position:relative; float:left; margin-left:20px;}
.slpzone_control>li:before{content:""; position:absolute; left:-10px; top:6px; width:1px; height:10px; background:#ddd;}
.slpzone_control>li:first-child:before{display:none;}
.slpzone_control a{font-size:13px;}
.slpzone_ttl{margin-bottom:5px; font-size:20px; color:#003b99;}
.slpzone_ttl strong{font-weight:800;}
.slpzone_con li{font-size:14px;}
.slpzone_btn{color:#0056e0; font-size:14px; font-weight:700;}

/* 서동이 */
.header{padding:4.5em 0px 4em; background:#e7f3fb}
.header_logo{width:251px; height:38px; background:url('/open_content/main/img2023/logo.png') no-repeat center center / cover}
.header_slogan{position:relative; width:150px; margin:0 auto;}
.header_slogan img{display:inline-block; vertical-align:top;}
.header_slogan img{opacity:0; transition-duration:.5s; transition-property:opacity, transform;}
.header_slogan-play img{opacity:1; transform:translate(0,0) !important;}
.header_slogan .slogan_t1{margin-top:2px; width:35px; transform:translate(0,-30%);}
.header_slogan .slogan_t2{transition-delay:.2s; width:35px; transform:translate(0,30%);}
.header_slogan .slogan_txt{transition-delay:.4s; width:70px; transform:translate(20%,0);}
.header_slogan .slogan_txt2{position:absolute; right:2px; top:-15px; width:30px; transition-delay:.8s; transition-duration:1s;}
.header_search_submit{cursor:pointer; position:absolute; right:0px; top:0px; text-indent:-100%; width:50px; height:100%; border:0; font-size:0; background:url('/open_content/main/img2023/search_submit.png') no-repeat center center ; overflow:hidden; background-size:76%}
.header_search_submit:focus{padding:3px; width:calc(100%-30px); border:3px solid #bb2027;}
.header_search_submit.off{background-image:url('/open_content/main/img2021/main/searchoff_submit.gif'); }
.header_search_icon{cursor:pointer; position:absolute; right:6px; top:2px; text-indent:-100%; width:50px; height:calc(100% - 4px); border:0; font-size:0; background:url('/open_content/main/img2023/search_icon.png') no-repeat center center ; overflow:hidden; background-size:65%}

/*검색 일부는 circle-wheel.css로 이관 서브퀵 검색이랑 공통이라서*/
.header_quick{text-align:center; font-size:0; line-height:0;}
.header_quick a{position:relative; display:inline-block; width:130px; padding-left:40px; line-height:40px; font-size:14px; color:#fff; border-radius:40px;}
.header_quick_link01{background:#0053da;}
.header_quick_link02{margin-left:5px; background:#347af9;}
.header_quick a:before{content:""; position:absolute; left:20px; top:8px; width:32px; height:22px; background-size:auto 100% !important;}
.header_quick a:hover:before{transform:rotateY(360deg); transition:all 1s ease;}
.header_quick_link01:before{background:url('/open_content/main/img2021/main/header_ic01.gif') no-repeat center center;}
.header_quick_link02:before{background:url('/open_content/main/img2021/main/header_ic02.gif') no-repeat center center;}
.header_quick_3d{position:relative; text-align:right; width:230px; line-height:1.4; margin:18px auto 0; padding:12px 15px 12px 13px; color:#484848; font-size:14px; font-weight:500; border:1px solid rgba(0,0,0,.2); border-radius:10px; background:#fff;}
.header_quick_3d span{display:block; font-weight:700;}
.header_quick_3d:before, .header_quick_3d:after{position:absolute; display:block; content:'';}
.header_quick_3d:before{top:7px; width:48px; height:48px; background:url('/open_content/main/img2021/main/header_ic03.gif') no-repeat center center; background-size:auto 100%;}
.header_quick_3d:after{top:-6px; left:85%; width:10px; height:10px; border-top:1px solid rgba(0,0,0,.2); border-left:1px solid rgba(0,0,0,.2); background:#fff; transform:rotate(45deg)}
/* .counselor_seodong{margin-top:-5px; } */
.counselor_seodong a{display:block; position:relative; padding:13px 50px 12px; padding-left:90px; background:url('/open_content/main/img2021/main/header_ic03.gif') no-repeat 15px bottom / 80px, url('/open_content/main/img2023/counselor_ic.png') no-repeat right 23px top 30%, #533ED7; border-radius:600px; line-height:1.3; color:#fff ; font-size:12px; font-family:'SCDream-regular';}
.counselor_seodong a:After{content:''; position:absolute; right:10px; bottom:-23px; width:52px; height:54px; background:url('/open_content/main/img2023/counselor_bg.png') no-repeat center center / cover; }
.mb_down{position:relative; margin:40px auto 0px; text-align:center; width:55px;}
.mb_down img{width:19px}
.mb_down:before{display:none; content:''; position:absolute; left:-40px; opacity:0; top:calc(90% - 40px); width:40px; height:40px; background:url('/open_content/main/img2023/mb_ic_down.png') no-repeat center center / cover; animation:mb_down 4s ease 0s infinite}
@keyframes mb_down{
 0%{opacity:0; top:calc(90% - 40px);}
 20%{opacity:1; top:calc(90% - 40px);}
 80%{opacity:1; top:20px}
 100%{opacity:0; top:20px}
}

body{padding-right:330px; transition:padding ease .5s}
body.asideClose{padding-right:0px;}
#container>div{margin:60px auto 80px}
h3{margin-bottom:1em; font-size:1.625em; color:#222; letter-spacing:-0.05rem;}
h3 span{font-family:'SCDream-regular'; ; font-weight:400}
.mainNav{position:absolute; left:450px; right:0; top:0; transition:.5s ease-in;}

/* 즐겨찾는메뉴
.customMenu{position:absolute; left:0; top:0; width:100%; min-height:70px; z-index:5;}
.customMenu_exposure{display:none; text-align:center; background:#fff; font-size:0;}
.customMenu_exposure li{display:inline-block; vertical-align:top; width:50%; margin:60px 0; font-size:1rem;}
.customMenu_exposure li:first-child{border-right:2px dotted #e0e0e0;}
.customMenu_exposure a{display:block; padding-top:80px; font-weight:700;}
.customMenu_exposure a:hover{text-decoration:none;}
.customMenu_exposure a:hover img{transform:rotateY(360deg); transition:all 1s ease;}
.customMenu_exposure .tag{margin-top:70px; color:#0056e0; font-weight:800;}
.customMenu_exposure .ttl{font-size:24px;}
.customMenu_exposure .btn{position:relative; display:inline-block; padding:8px 35px; margin:20px auto 60px; font-size:13px; color:#767676; font-weight:700; border:1px solid #dcdcdc;}
.customMenu_exposure a:hover .btn{color:#003b99;}dk.. ddd
.customMenu_exposure .btn:before{display:block; content:""; position:absolute; left:0; top:-1px; width:0; height:1px; background:#003b99; opacity:0; transition-duration:0.3s;}
.customMenu_exposure a:hover .btn:before{width:100%; opacity:1;}
.customMenu_exposure .btn:after{display:block; content:""; position:absolute; right:0; bottom:-1px; width:0; height:1px; background:#003b99; opacity:0; transition-duration:0.3s;}
.customMenu_exposure a:hover .btn:after{width:100%; opacity:1;}
.customMenu_exposure .btn span.lbg{display:block; position:absolute; left:-1px; bottom:0; width:1px; height:0; background:#003b99; opacity:0; transition-duration:0.6s;}
.customMenu_exposure a:hover .btn span.lbg{height:100%; opacity:1;}
.customMenu_exposure .btn span.rbg{display:block; position:absolute; right:-1px; top:0; width:1px; height:0; background:#003b99; opacity:0; transition-duration:0.6s;}
.customMenu_exposure a:hover .btn span.rbg{height:100%; opacity:1;} */

#container{content-visibility:auto;}
/* 구청장, 주요팝업존 */
.con2{position:relative; display:flex; justify-content:space-between}
.con2>div{flex:0 0 49.243%}
.headman{position:relative; display:flex; flex-direction:column; justify-content:space-between; position:relative; background:#F3F6FA url(/open_content/main/img2023/headman_bg.png) no-repeat right top / 55%; border-radius:10px; ;}
/* 구청장만 누끼로 나올때 .headman:before{content:''; position:absolute; right:8%; bottom:0px; max-width:250px; width:40%; height:280px; background:url(/open_content/main/img2023/headman.png) no-repeat center bottom / contain} */
.headman:before{content:''; position:absolute; right:0%; bottom:0px; width:100%; height:100%; background:url(/open_content/main/img2023/headman2025.png?v1.2) no-repeat center bottom / contain; z-index: 0;}
.headman>div{padding:7.5% 7% 2%; z-index: 1;}
.headman>p{padding:0px 7%;}
.headman_txt img{max-width:247px;}
.headman_ttl{margin-top:1%; font-size:1.6em; color:#222; letter-spacing:-0.02em;}
.headman_ttl .txt1{font-weight:300}
.headman_ttl .txt2{font-size:1.08em;
.headman_ttl .txt2 strong{font-weight:600}}
.headman_photo{position:absolute; right:25px; bottom:0; max-height:95%; z-index:0;}
.headman_link{width:50%; max-width:220px; min-width:150px; margin-top:20px;}
.headman_link>li{margin-bottom:5px;}
.headman_link a{position:relative; display:block; padding:5px 22px; border-radius:60px; font-size:.93em; background:#fff; overflow:hidden; transition:.4s;}
.headman_link a span{position:relative;}
.headman_link a:before{opacity:0; display:block; content:""; position:absolute; left:0; top:0; width:0; height:100%; border-radius:100px; background:#347af9; transition:.4s;}
.headman_link a:after{content:''; position:absolute; right:25px; top:calc(50% - 4px); width:6px; height:6px; bordeR:2px solid #666; border-width:2px 2px 0px 0px; transform:rotate(45deg); transition:.4s;}
.headman_link a:hover{text-decoration:none; color:#fff; padding-left:27px;}
.headman_link a:hover:before{opacity:1 ;width:100%;}
.headman_link a:hover:after{border-color:#fff; right:15px;}
/* 구청장만 누끼로 나올떄 .headman_go{background:#4A536A; border-radius:0px 0px 10px 10px; z-index: 1;} */
.headman_go{background:#4A536A; background:linear-gradient(90deg, #4A536A 40%, rgba(74, 83, 106, 0.00) 100%); border-radius:0px 0px 10px 10px; z-index: 1;}
.headman_go>a{display:block; padding:11px 0px; color:#fff; font-family:'SCDream-regular';}
.headman_go>a span{display:inline-block; vertical-align:middle; margin-left:5px; padding:3px 10px 6px; border-radius:60px; font-size:0.8em; background:rgba(0,0,0,.3); line-height:1;}
#visual{position:relative; overflow:hidden; border-radius:10px;}
.visual_control{position:absolute; ; font-size:0px; left:28px; bottom:13px; z-index:1;}
.visual_control>li{display:inline-block; font-size:0px}
.visual_control>li>a{display:block; position:relative; width:18px; height:18px;}
.visual_control>li>a:before{display:block; content:''; position:absolute; margin:auto; left:0px; right:0px; top:0px; bottom:0px; box-sizing:border-box}
.visual_control .btn_num a:before{width:11px; height:11px; border:2px solid rgba(0,0,0,.8); border-radius:20px}
.visual_control .btn_num.on a:before{background:rgba(0,0,0,.8);}
.visual_control .btn_stop a:before{left:-3px; width:3px; height:10px; border-radius:10px; background:rgba(0,0,0,.8); box-shadow:5px 0px rgba(0,0,0,.8)}
.visual_control .btn_play a:before{margin-left:5px; width:0px; height:0px; border-radius:2px; border:6px solid transparent; border-left:8px solid rgba(0,0,0,.8)}
.visual_control .btn_prev{margin-left: 8px;}
.visual_control :where(.btn_next, .btn_prev) a:before{width:9px; height:9px; border-radius:1px;  border:3px solid rgba(0,0,0,.8); transform:rotate(45deg)}
.visual_control .btn_prev a:before{right:-2px; border-width: 0px 0px 3px 3px}
.visual_control .btn_next a:before{border-width:3px 3px 0px 0px; }
.visual_control .cnt{display:inline-block; vertical-align:top; margin-top:3px; color:#fff; font-size:12px;}

.visual_control_next{position: absolute;}
.visual_control_next a{font-size:0px; display:block; position:relative; width:16px; height:16px;}

.visual_list{position:relative; font-size:0px; height:320px; white-space:nowrap; background:#fafafa;}
.visual_list li{display:inline-block; text-align: center; vertical-align:top; display:inline-block; width:100%; height:100%; }
.visual_list li img{width:100%; height: 100%; object-fit:cover; border-radius:10px;}
.visual_list li a:focus-visible{display: block; overflow:hidden; margin:2px}
.visual_list li a:focus-visible>img{border:3px solid #bb2027}

/* 공지사항 */
.board{position:relative; display:flex; justify-content:flex-end; align-items:flex-start; height:310px}
.board p.board_tab{z-index:1;}
.board p.board_tab a{display:block; padding:.4em 1.5em; font-size:1.2em; border-radius:60px; transition:all ease .2s; text-decoration:none;}
.board p.board_tab:not(.on) a:hover{color:#0056DF; font-weight:bold;}
.board p.board_tab.on a{background:#0056DF; color:#fff}
.board_list{display:none; position:absolute; left:0px; width:100%; }
.board p.on+.board_list{display:block}
.board_list{}
.board_list ul{display:flex; justify-content: space-between; margin-top:1em;}
.board_list ul>li{flex: 0 0 24.3%;}
.board_list ul>li a{display:flex; flex-direction:column; padding:10% 14%; height:100%; background:#F9F9F9; letter-spacing:-.01em; border-radius:8px; word-break:break-word}
.board_list ul>li p.tit{ font-size:1.13em; word-break:keep-all; overflow:hidden; height:3em;}
.board_list ul>li :where(p.txt, p.date){font-size:0.93em; color:#666;}
.board_list ul>li p.txt{margin-top:1em; height:3em; overflow:hidden; }
.board_list ul>li p.date, .board_list ul>li p.date span{font-family:'SCDream-regular';}
.board_list ul>li p.date{flex-grow:1; margin-top:2em; padding-top:1em; border-top:1px solid rgba(0,0,0,.1)}
.board_list ul>li p.date span:before{content:'/'; margin:0px .5em}
.board_more{display:inline-block; position:relative; vertical-align:middle; margin-top:-5px; width:30px; height:30px; font-size:0px}
.board_more:after,
.board_more:before{content:""; position:absolute; margin:auto; left:0px; right:0px; top:0px; bottom:0px; width:17px; height:1px; background:#333;}
.board_more:before{transform:rotate(90deg)}


.controlset{display:flex; align-items:center}
.controlset .next,
.controlset .prev{display:inline-block; position:relative; width:2.5rem; height:2.5rem; border-radius:5px; font-size:0px; text-indent:-5000px; background:none; border:0px; cursor:pointer}
.controlset .next:before,
.controlset .prev:before{display:block; content:''; position:absolute; top:calc(50% - .5rem); left:calc(50% - .5rem); width:1rem; height:1rem; border:1px solid  #272727; transform:rotate(45deg); transform-origin:center}
.controlset .prev:before{border-width:0px 0px 1px 1px; margin-left:.2rem; }
.controlset .next:before{border-width:1px 1px 0px 0px; margin-left:-.2rem;}
.mphoto .controlset{position:absolute; right:0px; top:5px;}
.splide_controlset{position:relative; justify-content:center; margin-left:-8px; max-width:120px; }
.splide_controlset .splide__arrow{position:absolute;}
.splide_controlset .splide__arrow--prev{left:0px;}
.splide_controlset .splide__arrow--next{right:0px;}
.splide_controlset .splide__pagination{position:relative; width:1.2rem;}
.splide_controlset .splide__pagination li{position:absolute; left:0px; top:0px; text-align:center; width:100%;}
.splide_controlset .cnt{display:flex;}
.splide_controlset .cnt .totalpg:before{content:'/ ';}
.splide_controlset .splide__pagination{
  counter-reset:pagination-num;
}
.splide_controlset .splide__pagination__page:before{
  counter-increment:pagination-num;
  content:counter( pagination-num );
}
.splide_controlset .splide__pagination__page{visibility:hidden;  border:0px; background:none; }
.splide_controlset .splide__pagination__page:before{font-size:1rem;}
.splide_controlset .splide__pagination__page.is-active{visibility:visible; font-weight:600;}
/*  주요서비스 */
#container>div.service{padding:4em 0px 0px; background:#F9F9FD;}
/* #service{overflow:hidden} */
#service:After{display: block; content: ''; clear: both;}
#service .titBox{float:left; width:15%;}
#service .splide__sr{display:none !important}
#service .service_list{position:relative; float:right; width:82%; padding-bottom:4em; overflow:hidden}
#service .service_list ul{display:flex; padding-top:10px; margin:0px 3px}
#service .service_list ul>li{text-align:center; min-width:max(12.5%, 5.6em)}
#service .service_list ul>li a{display:block; position:relative; top:-0px; white-space:nowrap; transition:all ease .3s; text-decoration:none; line-height: 130%;}
#service .service_list ul>li a:before,
#service .service_list ul>li a:after{display:block; content:''; margin:0px auto .8em; }
#service .service_list ul>li a:before{ width:86px; height:86px; border-radius:12px; border:1px solid transparent; background-image:linear-gradient(#f9f9fd, #f9f9fd),   linear-gradient(to bottom, transparent 0%,  rgba(0,0,0,.1) 100%); background-origin:border-box; background-clip:content-box, border-box; box-shadow:0px 1px 5px 0px rgba(0, 0, 0, .1); transition:all ease .5s}
#service .service_list ul>li a:after{position:absolute; margin:auto; top:18px; left:0px; right:0px; width:50px; height:50px; background:url(/open_content/main/img2023/service_ic.png?ver=1.25) no-repeat left top/200%}
#service .service_list ul>li a.ic02:after{background-position-y:-50px}
#service .service_list ul>li a.ic03:after{background-position-y:-100px}
#service .service_list ul>li a.ic04:after{background-position-y:-150px}
#service .service_list ul>li a.ic05:after{background-position-y:-200px}
#service .service_list ul>li a.ic06:after{background-position-y:-250px}
#service .service_list ul>li a.ic07:after{background-position-y:-300px}
#service .service_list ul>li a.ic08:after{background-position-y:-350px}
#service .service_list ul>li a.ic09:after{background-position-y:-400px}
#service .service_list ul>li a.ic10:after{background-position-y:-450px}
#service .service_list ul>li a.ic11:after{background-position-y:-500px}
#service .service_list ul>li a.ic12:after{background-position-y:-550px}
#service .service_list ul>li a.ic13:after{background-position-y:-600px}
#service .service_list ul>li a.ic14:after{background-position-y:-650px}
#service .service_list ul>li a.ic15:after{background-position-y:-700px}
#service .service_list ul>li a.ic16:after{background-position-y:-750px}
#service .service_list ul>li a.ic17:after{background-position-y:-800px}
#service .service_list ul>li a:hover{top:-3px; color:#0056DF; font-weight:600;}
#service .service_list ul>li a:hover:before{background:linear-gradient(#fff, #fff); box-shadow:0px 2px 10px 0px rgba(117, 201, 250, 0.5);}
#service .service_list ul>li a:hover:After{background-position-x:-50px}
#service .splide__progress{position:absolute; bottom:0px; left:0px; width:100%; background:#eee; border-radius:60px}
#service .splide__progress__slide{height:4px; min-width:50%; background:linear-gradient(90deg, #3E74FF 0%, #533ED7 100%), #533ED7; transition:width .8s ease-out 0s; border-radius:60px}

/* 포토현장속으로 */
.mphoto{position:relative;}
.mphoto_list{overflow:hidden; height:270px; padding-left: 1px;}
.mphoto_list>ul{white-space:nowrap; font-size:0; margin-left: 1px;}
.mphoto_list>ul li{display:inline-block; vertical-align:top; margin-right:2%; width:32%;}
.mphoto_list>ul a{position:relative; display:block;}
.mphoto_list_tag{position:absolute; left:10px; top:10px; width:24px;}
.mphoto_list>ul li img{min-width:100%; min-height:100%; max-height:250px;}
.mphoto_list>ul li .photo_img{height:225px; border-radius:8px; overflow:hidden}
.mphoto_list>ul li .photo_img img{width:100%; height:100%; object-fit:cover}
.mphoto_list>ul li .mphoto_list_ttl{font-size:1.125em; margin-top:1em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.mphoto_list>ul li .photo_date{display:none;}

/* 서구소식 */
.con6{margin-top:6em !important; background:url('/open_content/main/img2023/news_bg.png') no-repeat right 27% top}
.imgNews{position:relative; display:flex; justify-content:space-between}
.imgNews:before{content:src('/open_content/main/img2023/news_bg.png');}
.imgNews>div{flex:0 1 22%; display:flex; flex-direction:column; text-align:center;}
.imgNews>div .img{height:190px;  border-radius:8px}
.imgNews>div .img a{position:relative; display:block; height:100%; overflow:hidden; border-radius:8px}
.imgNews>div .img img{width:100%; height:100%; object-fit:cover}
.imgNews>div .tit{margin:1em 0px .7em; font-size:1.26em; color:#333; font-weight:600;}
.imgNews>div .txt a{display: inline-block; width: 100%; padding:0px 5%; font-size:0.93em; letter-spacing:-.02em; line-height: 150%; word-break:keep-all; color:#666;}
.imgNews>div.imgNews_green .img{margin-top:-50px; height:240px;}
.imgNews>div.imgNews_green .img img{height:auto; object-fit:normal}
.imgNews_green .txt span{display:block;}
.imgNews>:where(.imgNews_video, div.imgNews_tv) .img{background:#000;}
.imgNews>:where(.imgNews_video, div.imgNews_tv) .img img{opacity:.5;}
.imgNews>:where(.imgNews_video, div.imgNews_tv) .img a:before{position:absolute; margin:auto; top:0px; bottom:0px; left:0px; right:0px; width:24px; height:29px; content:''; background:url( "/open_content/main/img2023/imgnews_play.png") no-repeat center center / cover; z-index:1;}

/* 오른쪽 팝업존 */
.aside{position:fixed; right:-10px; top:0px; width:340px; height:100%; background:#fff; z-index:119; box-shadow:0px 0px 4px 0px rgba(0, 0, 0, 0.20); transition:all ease .5s}
.asideClose .aside{right:-340px; box-shadow:none}
.aside .pzone{height:100%; padding:2em; overflow-y:scroll; overflow-x:auto;}
.aside .pzone [class^=asidebtbn]{position:absolute; top:8%; right:100%; text-align:center; padding:30px 0px; width:38px; height:183px; background:url(/open_content/main/img2023/aside_bg.png) no-repeat left center / 38px; z-index:120; word-break:break-all; font-size:.85em; line-height:1; }
.aside .pzone .asidebtbn_open{display:none;}
.aside .pzone p a{display:flex; padding:0px 20px; height:100%; align-items:center; text-decoration:none; font-size:12px;}
.aside .pzone p a span{display:block; position:relative; padding-bottom:10px;}
.aside .pzone p a span:before,
.aside .pzone p a span:after{content:'' ; position:absolute; bottom:0px; left:-1px; width:12px; height:1px; background:#666; transform:rotate(-45deg)}
.aside .pzone p.asidebtbn_close a span:after{transform:rotate(45deg)}
.aside .pzone p.asidebtbn_open a span:before,
.aside .pzone p.asidebtbn_open a span:after{width:8px; left:1px}
.aside .pzone p.asidebtbn_open a span:after{bottom:-5px; transform:rotate(45deg)}
.aside .pzone h3{float:left; width:72px;}
.aside .pzone_control{float:left; ; width:calc(100% - 72px); position:relative; padding:9px 5px 0px; font-size:0px; }
.aside .pzone_control>a{position:relative; display:inline-block; width:20px; height:20px;}
.aside .pzone_control>a#pzoneStop,
.aside .pzone_control>a#pzonePlay{position:absolute; right:0px;}
.aside .pzone_control>a#pzonePlay{display:none;}
.aside .pzone_control>a:after,
.aside .pzone_control>a:before{content:''; position:absolute; top:50%; margin-top:-4px; border:2px solid #333; }
.aside .pzone_control>a:after{left:50%;  margin-left:-5px; width:6px; height:6px; transform:rotate(45deg)}
.aside .pzone_control>a#pzoneNext:after{margin-top:-2px; width:8px; height:8px; border-width:2px 0px 0px 2px}
.aside .pzone_control>a#pzonePrev:after{margin-top:-7px; width:8px; height:8px; border-width:0px 2px 2px 0px}
.aside .pzone_control>a#pzoneStop:after,
.aside .pzone_control>a#pzonePlay:after{left:5px; border-width:2px 2px 0px 0px}
.aside .pzone_control>a#pzoneStop:before,
.aside .pzone_control>a#pzonePlay:before{left:10px; margin-top:-6px; width:1px; height:12px; border-width:0px 2px 0px 2px}
.aside .pzone_list{clear:both; overflow:hidden}
.aside .pzone_list ul{position:relative; font-size:0px; max-width:260px;}


.aside .pzone_list ul li{font-size:0px; margin-bottom:12px; border-radius:8px; overflow:hidden; padding: 1px;}
.aside .pzone_list ul li a:focus-visible {position:relative; display:inline-block; box-shadow:none; outline:0;}
.aside .pzone_list ul li a:focus-visible:before {position:absolute; left:0; top:0; right:0; bottom:0; border:5px solid #fff; border-radius:8px; content:"";}
.aside .pzone_list ul li a:focus-visible:after {position:absolute; left:1px; top:1px; right:1px; bottom:1px; border:2px dashed #e4004b; border-radius:8px; content:"";}


.aside .pzone_list ul li img{width:100%; }
.footer_link li {padding:0px 18px;}
.footer_link li+li:before{display: block; content: ''; position: absolute; left: 0px; top: 50%; margin-top: -7px; width: 1px; height: 14px; background: #ddd;}


/*************************************************************************************************************/

/*pc*/
@media all and (min-width:1101px){
	.dp_mb{display:none;}
	.header .wrapper{display:flex; gap:20px; max-width:1020px; align-items:flex-start}
	.header .header_search{flex-grow:1}
}
@media screen and (max-width:1280px){
	body{padding-right:0px;}
	.aside{opacity:0; visibility:hidden; right:max(-340px, -55%); box-shadow:none; width:min(340px, 55%)}
	.aside.shown{opacity:1; visibility:visible; ; z-index:201;}
	.aside.shown .pzone .asidebtbn_open{display:block;}
	.aside .pzone .asidebtbn_open,
	.aside .pzone .asidebtbn_close,
	.aside.shown .pzone .asidebtbn_close{display:none;}
	.asideClose .aside{right:-10px; box-shadow:0px 0px 4px 0px rgba(0, 0, 0, 0.20); }
}
/*tablet - mobile*/
@media screen and (max-width:1100px){
	.dp_pc{display:none;}
	.header{display:flex; height:100vh; min-height:570px}
	.header .wrapper{width:80%;}
	.header_search{ max-width:640px;  width:100%; margin:5vh auto 5vh}
	.header_logo{font-size:0px; text-indent:-5000px; margin:auto; width:200px; height:31px; background:url('/open_content/main/img2023/logo_bk.png') no-repeat center center / cover;}
	#service .controlset{display:none;}
	#service .titBox{float:none; width:100%;}
	#service .service_list{float:none; width:100%}
}

@media screen and (max-width: 1024px) {
	.m_popup2 {left: auto;}
}

/*mobile*/
@media screen and (max-width:800px){
	html,body,div,p,dl,dt,dd,ol,ul,li,label,legend,table,input{ font-size:clamp(11px, 3.5vw, 13px)}
	.slpzone{height:auto; min-height:50px; padding:13px 10px 13px 70px; border-top:1px solid #eee; background-size:30px; background-position:25px center;}
	.slpzone_control,
	.slpzone_con{display:none;}
	.slpzone_ttl{font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
	#container>div{margin:3em auto}
	.con2{flex-direction:column; /* gap:1em */}
	.con2>div+div{margin-top:2em;}
	.visual_list{height:45vw}
	.visual_control{left:25px}
	.visual_control>li{margin-right: 0px;}
	/* .board{justify-content:space-between}
	.board h3{font-size:0px; position:absolute; margin:auto; left:0px; right:0px; bottom:-50px;} */
	.board{flex-direction:column; gap:5px; justify-content:flex-start; height:260px}
	.board:before{display:block; content:''; position:absolute; width:max(90px, 20%); height:100%; background:#0053da; border-radius:10px; border-radius:5px}
	.board p.board_tab{position:relative; text-align:center; width:max(90px, 20%); transition:.4s}
	.board p.board_tab:first-child{margin-top:10px;}
	.board p.board_tab.on{left:10px;}
	.board p.board_tab a{padding:10px 3px; padding-bottom:9px; border-radius:5px; font-size:1.1em; color:#fff;}
	.board p.board_tab.on{}
	.board p.board_tab.on a{background:#fff; box-shadow:0px 1px 8px rgba(0,0,0,.2), 0px 1px 2px rgba(0,0,0,.5); color:#333;}
	.board_list{left:max(90px, 20%); width:calc(100% - max(90px, 20%)); padding-left:30px; padding-top:10px; }
	/* .board_list ul{display:flex; gap:10px; margin-top:2em; overflow-x:scroll}
	.board_list ul>li{flex-basis:80%; } */
	.board_list h3{text-align:left; position:relative;}
	.board_list h3 a{position:absolute; right:0px}
	.board_list ul{flex-direction:column; gap:0px; margin-top:10px}
	.board_list ul>li{border-top:1px solid #ddd}
	.board_list ul>li a{padding:14px 0px; height:unset; background:none}
	.board_list ul>li p.tit{font-size:13.5px; height:auto; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
	.board_list ul>li :where(p.txt, p.date){display:none;font-size:13px}
	.board_list ul>li p.txt{display:none;}
	.board_list ul>li p.date, .board_list ul>li p.date span{font-family:'SCDream-regular';}
	.board_list ul>li p.date{margin-top:0em; padding-top:0em; border-top:none}
	#container>div.service{padding-top:3em;}
	#service .service_list ul>li{min-width:25%;}
	#service .service_list ul>li a:before{width: 70px; height: 70px;}
	#service .service_list ul>li a:after{top:12px; transform:scale(.85)}
	#service .splide__progress__slide{min-width:unset}
	#container>div.con5{margin-top:3.5em;}
	.mphoto .controlset{top:-2px;}
	.mphoto_list{height:200px;}
	.mphoto_list>ul li{width:220px; }
	.mphoto_list>ul li .photo_img{height:150px}
	.con6{margin-top:inherit !important; background:none;}
	.imgNews{flex-direction:column}
	.imgNews:before{display:none}
	.imgNews>div{gap:10px; flex-direction:row; text-align:left; margin-bottom:20px;}
	.imgNews>div .img{flex:0 0 50%; max-width:130px; height:120px}
	.imgNews>div .tit{margin-top:.5em;}
	.imgNews>div .txt a{padding:0px}
	.imgNews>:where(.imgNews_video, div.imgNews_tv) .img img{opacity:.7;}
	.imgNews>div.imgNews_green .img{margin-top:0px; height:120px;}
	.imgNews>:where(.imgNews_video, div.imgNews_tv) .img a:before{transform:scale(.8)}
}


._voice_popup{
	z-index:99;
    top:0;
    display:none;
    position:fixed;
    width:100vw;
    height:100vh;
    background:#111111aa;
    left:0;
}

._voice_popup .close{
    position:absolute;
    cursor:pointer;
    border-radius:50%;
    border:1px solid #ffffffaa;
    width:24px;
    height:24px;
    background:url(/open_content/main/images/layerPop/ic_close.png) no-repeat center/10px;
    right:2rem;
}

._voice_div{
    box-sizing:content-box;
    position:relative;
	padding:2rem 1rem;
    height:280px;
    background:linear-gradient(to left, rgb(1, 161, 183), rgb(37, 110, 239));
    color:#fff;
    border-radius:40px;
    width:90%;
    max-width:400px;
    margin:auto;
    text-align:center;
}

._voice_title > p{
	color:#fff;
    padding:2rem 0;
}

._voice_mic > ._voice_mic_area{
    width:160px;
    border-radius:50%;
    height:160px;
    margin:0 auto;
    border:10px solid #ffffff22;
    cursor:pointer;
}

._voice_popup.on{
	display:flex;
}

._voice_mic_area > div.on{
	display:block;
}

._voice_mic_area ._voice_mic_start,
._voice_mic_area ._voice_mic_stop{
	display:none;
    width:100%;
    height:100%;
    border-radius:50%;
    border:20px solid #ffffff55;
    background:no-repeat center/30px;
}

._voice_mic_area ._voice_mic_start{
	background-image:url(/open_content/main/images/layerPop/search_submit.gif);
}

._voice_mic_stop > .spinner{
    margin:0 auto;
    display:flex;
    align-items:center;
    height:100%;
    width:fit-content;
}

._voice_mic_stop > .spinner > div{
    margin:0 4px;
    border-radius:50%;
    background:#fff;
    padding:8px;
    -webkit-animation:sk-bouncedelay 0.8s infinite ease-in-out both;
    animation:sk-bouncedelay 0.8s infinite ease-in-out both;
}

.spinner .bounce1{
  -webkit-animation-delay:-0.2s !important;
  animation-delay:-0.2s !important;
}

.spinner .bounce2{
  -webkit-animation-delay:-0.1s !important;
  animation-delay:-0.1s !important;
}

@-webkit-keyframes sk-bouncedelay{

  0%,
  80%,
  100%{
    -webkit-transform:scale(0)
  }

  40%{
    -webkit-transform:scale(1.0)
  }
}

@keyframes sk-bouncedelay{

  0%,
  80%,
  100%{
    -webkit-transform:scale(0);
    transform:scale(0);
  }

  40%{
    -webkit-transform:scale(1.0);
    transform:scale(1.0);
  }
}