/* 2023 03 08 부패방지 신고센터  */

.report_explanation{margin: 0 auto;}
.report_explanation p{font-size: 20px; line-height: 1.5; color: #1b1b1b; text-align: center;}
.report_explanation p + p{margin-top: 20px;}

.report_view{border: 1px solid pink;}
.report_view table{width: 100%; border-collapse: collapse;}
.report_view>table th,
.report_view>table td{min-height: 30px; padding: 10px; border-bottom:1px solid #e2e2e2; font-weight: 400; font-size: 17px; line-height:1.5; color: #666; text-align:left; vertical-align: middle; border-collapse:collapse; empty-cells:show;}

.report_view>table th{width: 150px; padding:0px; background-color:#fbfbfb; border-right:1px solid #e2e2e2; color: #333; text-align: center;}

.report_view input[type=button],
.report_view input[type=text],
.report_view input[type=password],
.report_view input[type=file],
.report_view select,
.report_view textarea,
.report_view .btns{width:100%; height:4.6rem; padding:0 1rem; background-color:#fff; border:1px solid #e2e2e2; font-weight: 300; font-size:1.5rem; line-height:4.4rem; color:#888; vertical-align:middle; display:inline-block;}

.report_view .view_file a{padding: 10px 16px; background-color: #fff; border:1px solid #999; font-size:15px; line-height:1; color: #333; display: inline-block; border-radius:4px; box-sizing:border-box; white-space: nowrap;}
.report_view .view_file a + a{margin-left: 10px;}
.report_view .view_file a:hover{background-color: #333; border:1px solid #999; font-size:15px; line-height:1; color: #fff; display: inline-block; border-radius:4px; box-sizing:border-box; white-space: nowrap;}

.report_writen{margin: 50px 0 30px;}
.report_writen > h4.circle{position: relative; padding-left: 40px; font-size: 33px; line-height: 1; font-weight: bold; margin-bottom: 20px;}
.report_writen > h4.circle::before{position: absolute; top: 1px; left: 0; content: ''; background: url('/theme/basic/img/report_circle.jpg') no-repeat; background-size: contain; width: 33px; height: 33px;}
.report_writen > p{font-size: 18px; font-weight: 450; line-height: 1.3; margin-bottom: 20px;}
.report_writen > li a span{font-size: 18px; background: #919191; color: #fff; padding: 10px 20px; display: inline-block; line-height: 1; border-radius: 3px;}
.report_writen > li a span:hover{background: #463c66; color: #fff; }

/* common */
html, body { margin: 0; width: 100%; height: 100%; position:relative; padding: 0; font-size: 1em;}
* {margin:0; padding:0; list-style:none; text-decoration:none; font-family: 'Noto Sans KR', sans-serif; -webkit-text-size-adjust: none; box-sizing: border-box; word-break: keep-all;}

ul>li>a { text-decoration:none; }
a {color: #333; text-decoration: none;}
table { border-collapse: collapse; }
textarea {box-sizing: border-box; resize: none; font-size: 1rem;}
select {-webkit-border-radius: 0; -webkit-appearance: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; box-sizing: border-box; cursor: pointer;}
input,select,textarea,strong,em,p,h1,h2,h3,h4,span,td,button,th,li,a,i,b {font-style:normal; margin: 0; letter-spacing: -1px; font-size: 1rem;}
ul { margin: 0;padding: 0;list-style: none;}
img {max-width:100%;}
button {cursor: pointer;}
.clear:after {content: ""; display: block; clear: both;}
html.hidden,
body.hidden {
    overflow: hidden !important;
}
.limit {max-width: 1300px; width: 100%; padding: 0 10px; margin: 0 auto;}
.limit1400 {max-width: 1420px; width: 100%; padding: 0 10px; margin: 0 auto;}
.root_daum_roughmap .wrap_controllers {display: none !important;}
/********************************************/
#hd {position: relative;}
.sound_only,
#hd_h1,
#skip_to_container,
#hd_login_msg {display: none;}
/* */

header {position: fixed; left: 0; top: 0; width: 100%; height: 90px; transition: .3s ease; z-index: 10; background: rgba(0,0,0,0.2); z-index: 20;}
header::before {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #8c3058; transition: .3s ease; opacity: 0;}

header > div {height: 100%;}
header > div.limit1400 {position: relative; z-index: 2;}

header .logo {float: left;}
.logo {display: inline-block; position: relative; width: 204px; height: 100%;}
.logo a {position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: url('/images/common/logo.png')no-repeat; background-position: center !important; background-size: contain !important; text-indent: -9999px; transition: .3s ease;}
.logo a.on {background: url('/images/common/logo_on.png')no-repeat; opacity: 0;}

header.new .logo {width: 204px; }
/*
header.new .logo a {width:108px; background-image: url('/images/common/logo_new.png');}
header.new .logo a.on {background-image: url('/images/common/logo_new_on.png');}
*/
header.new .logo a {width:198px; background-image: url('/images/common/logo_new2.png');}
header.new .logo a.on {background-image: url('/images/common/logo_new2_on.png');}

.main_nav {position: absolute; left: 50%; top: 0; height: 100%; transform: translate(-50%,0); }
.main_nav > ul.total_nav { height: 100%; white-space: nowrap;}
.main_nav > ul.total_nav > li {position: relative; display: inline-block; text-align: left; height: 100%; text-align: center;}
.main_nav > ul.total_nav > li > a { display: table; transition: .3s ease; padding: 0 55px; height: 100%;}
.main_nav > ul.total_nav > li span {position: relative; display: table-cell; vertical-align: middle; text-transform: uppercase; transition: .3s ease; font-weight: 500; color: #fff; font-size: 1.25rem; letter-spacing: 0;}
.main_nav > ul.total_nav > li > a span::after {content: ""; position: absolute; bottom: 0px; width: 100%; left: 0; height: 2px; background: #463c66; opacity: 0; transition: .3s ease;}

.main_nav > ul.total_nav > li ul.depth2 {position: absolute; top: 100%; left: 0; width: 100%; height: 260px;  display: none; transition: background .3s ease;}
.main_nav > ul.total_nav > li ul.depth2 li:nth-of-type(1) {margin: 15px 0 0;}
.main_nav > ul.total_nav > li ul.depth2 a {display: block; padding: 10px 0; text-align: center;}
.main_nav > ul.total_nav > li ul.depth2 a span {display: block; font-size: 1.063rem; font-weight: 400; color: #666666; transition:.3s ease;}

.main_nav > ul.total_nav > li.on ul.depth2,
.main_nav > ul.total_nav > li:hover ul.depth2 {background: #f7f7f7;}

.main_nav > ul.total_nav > li ul.depth2 li.on > a span,
.main_nav > ul.total_nav > li ul.depth2 li:hover > a span {color: #463c66;}

.main_nav > ul.total_nav > li ul.personal_nav {position: absolute; top: 100%; left: 50%; transform: translate(-50%,0); font-size: 0; width:100%; display: none; background: #fff;}
.main_nav > ul.total_nav > li ul.personal_nav li {display: block;}
.main_nav > ul.total_nav > li ul.personal_nav li a {display: block; padding: 10px 0; text-align: center; border-bottom: 1px solid #ddd; transition: .3s ease;}
.main_nav > ul.total_nav > li ul.personal_nav li span {display: block; font-size: 1rem; font-weight: 400; color: #666666; transition: .3s ease;}
.main_nav > ul.total_nav > li ul.personal_nav li.on a,
.main_nav > ul.total_nav > li ul.personal_nav li:hover a {background: #463c66;}
.main_nav > ul.total_nav > li ul.personal_nav li.on span,
.main_nav > ul.total_nav > li ul.personal_nav li:hover span {color: #fff;}

header .bg {position: absolute; top: 100%; left: 0; width: 100%; height: 0px; background: rgba(255,255,255,0.85); transition: .3s linear; overflow: hidden;}
header .bg.total {height: 260px;}

.hamburger_wrap {position: absolute; cursor: pointer; transition: .15s ease; height: 100%; width: 30px; z-index: 5; right: 10px; top: 50%; transform: translate(0,-50%); border-radius: 0;}
#nav-icon3 {position: absolute; width: 100%; height: 28px; -webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;-o-transition: .5s ease-in-out;transition: .5s ease-in-out;cursor: pointer; top: 50%; transform: translate(0,-50%); left: 50%; top: 50%; transform: translate(-50%,-50%);}
#nav-icon3 span {display: block;position: absolute;height: 2px;width: 100%;background: #fff; opacity: 1;left: 0;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-o-transition: .25s ease-in-out;transition: .25s ease-in-out;}
#nav-icon3 span:nth-child(1) {top: 0px;}
#nav-icon3 span:nth-child(2),
#nav-icon3 span:nth-child(3) {top: 14px; width: 80%; left: 20%;}
#nav-icon3 span:nth-child(4)  {top: 28px;}
#nav-icon3.open span:nth-child(1) {top: 12.5px;width: 0%;left: 50%;}
#nav-icon3.open span:nth-child(2) {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg); width: 100%; left: 0;}
#nav-icon3.open span:nth-child(3) {-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg); width: 100%; left: 0;}
#nav-icon3.open span:nth-child(4) {top: 12.5px;width: 0%;left: 50%; }

header.scrolled::before ,
header.over::before ,
header:hover::before {opacity: 1;}
header.scrolled .logo a ,
header.over .logo a ,
header:hover .logo a {opacity: 0;}
header.scrolled .logo a.on ,
header.over .logo a.on ,
header:hover .logo a.on {opacity: 1;}
header.scrolled ,
header.over ,
header:hover {background: #fff;}
header.scrolled .main_nav > ul.total_nav > li > a span ,
header.over .main_nav > ul.total_nav > li > a span ,
header:hover .main_nav > ul.total_nav > li > a span {color: #000;}
header.scrolled .main_nav > ul.total_nav > li:hover > a span ,
header.over .main_nav > ul.total_nav > li:hover > a span ,
header:hover .main_nav > ul.total_nav > li:hover > a span {color: #463c66;}
header.scrolled #nav-icon3 span  ,
header.over #nav-icon3 span  ,
header:hover #nav-icon3 span  {background: #000;}

.mobile {display: none !important;}

.main_nav > ul.total_nav > li:hover > a span::after {opacity: 1;}


footer {height: 300px;}
footer .top_part {background: #1c1c26; height: 60px;}
footer .top_part > div,
footer .top_part ul {height: 100%;}
footer .top_part li {display: inline-block; float: left; height: 100%; margin: 0 30px 0 0;}
footer .top_part li:last-child {margin: 0;}
footer .top_part li a {display: table; width: 100%; height: 100%;}
footer .top_part li a span {display: table-cell; vertical-align: middle; color: #bbbbbb; font-size: 1rem; font-weight: 400; transition: .3s ease;}
footer .top_part li:hover a span {color: #ffffff;}

footer .bottom_part {background: #0d0b10; padding: 25px 0; height: calc(100% - 60px);}
footer .logo {height: 52px; float: left;}
footer .logo a {background: url('/images/common/footer_logo.png')no-repeat;}
footer .bottom_part .contents {display: inline-block; float: left; padding: 0 0 0 40px; width: calc(100% - 210px);}
footer .bottom_part .contents li {position: relative; display: inline-block; float: left; color: #bbbbbb; padding: 0 15px 0 0; margin: 0 15px 10px 0;}
footer .bottom_part .contents li::after {content: ""; position: absolute; right: 0; top: 50%; transform: translate(0,-50%); width: 1px; height: 12px; background: #696b6c;}
footer .bottom_part .contents li:last-child {margin: 0 0 10px; padding: 0;}
footer .bottom_part .contents li:last-child::after {display: none;}
footer .bottom_part .contents .copyright {font-size: 0.875rem; font-weight: 400; color: #9c9d9f; margin: 30px 0 0;}
footer .bottom_part .contents .copyright span {font-size: 0.875rem; font-weight: 400; color: #fff;}

header .arrow_wrap {position: absolute; right: 10px; top: 50%; transform: translate(0,-50%); width: 28px; height: 14px;}
header .arrow_wrap img {position: absolute; left: 0; top: 0; transition: .3s ease; opacity: 0;}
header .arrow_wrap img:nth-of-type(1) {opacity: 1;}


/*
footer.new .logo {width:148px; height: 66px; text-align: left;}
footer.new .logo a {background: url('/images/common/footer_logo_new.png') no-repeat left top !important; background-size:108px auto !important;}
*/
footer.new .logo {width:180px; height: 66px; text-align: left;}
footer.new .logo a {background: url('/images/common/footer_logo_new2.png') no-repeat left 7px !important; background-size:180px auto !important;}

@media screen and (max-width: 1300px) {
    .main_nav {position: relative; left:auto; top: auto; float: left; transform: translate(0); margin: 0 0 0 50px;}
}
@media screen and (max-width: 1100px) {
    .main_nav {margin: 0 0 0 20px;}
}
@media screen and (max-width: 1024px) {
    .pc {display: none !important;}
    .mobile {display: block !important;}
    img.mobile {display: inline-block !important;}

    header {position: fixed; z-index: 20;}
    .main_nav {position: absolute; left: 0; top: 100%; height: calc(100vh - 100%); float: none; margin: 0; width: 100%; background: rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transition: .3s ease;}
    .mobile_on .main_nav {opacity: 1; visibility: visible;}
    .main_nav > ul.total_nav {white-space: normal; height: auto; background: #fff;}
    .main_nav > ul.total_nav > li {width: 100%; height: auto; border-bottom: 1px solid #ddd;}
    .main_nav > ul.total_nav > li > a {display: block; padding: 0; position: relative; text-align: left; height: auto;}
    .main_nav > ul.total_nav > li > a span {display: block; padding: 10px; color: #222222;}
    .main_nav > ul.total_nav > li > a span::after {display: none;}

    header:hover .main_nav > ul.total_nav > li:hover > a span {color: #222;}

    .main_nav > ul.total_nav > li.m_active > a {background: #463c66;}
    .main_nav > ul.total_nav > li.m_active > a span,
    header:hover .main_nav > ul.total_nav > li.m_active > a span {color: #fff;}
    .main_nav > ul.total_nav > li.m_active .arrow_wrap img {transform: rotate(180deg);}
    .main_nav > ul.total_nav > li.m_active .arrow_wrap img:nth-of-type(1) {opacity: 0;}
    .main_nav > ul.total_nav > li.m_active .arrow_wrap img:nth-of-type(2) {opacity: 1;}

    .main_nav > ul.total_nav > li ul.depth2 {position: relative; left: 0; top: 0; transform: translate(0); height: auto;}
    .main_nav > ul.total_nav > li ul.depth2 li:nth-of-type(1) {margin: 0;}
    .main_nav > ul.total_nav > li ul.depth2 a {text-align: left; padding: 10px 15px; border-bottom: 1px solid #ddd;}
    .main_nav > ul.total_nav > li ul.depth2 li:last-child a { border: none;}

    header.scroll {background: #fff;}
    header.scroll .logo a {opacity: 0;}
    header.scroll .logo a.on {opacity: 1;}
    header.scroll #nav-icon3 span {background: #000;}
    header.scroll::before {opacity: 1;}


}

@media screen and (max-width: 768px) {
    html, body {font-size: 0.875em;}
    header {height: 90px;}
    .logo {width: 150px;}

	header.new .logo{width: auto;}
	/*
	header.new .logo a {width:80px;}
	*/
	header.new .logo a {width:140px;}

    .hamburger_wrap {width: 25px;}
    #nav-icon3 {height: 22px;}
    #nav-icon3 span:nth-child(2),
    #nav-icon3 span:nth-child(3) {top: 11px; width: 80%; left: 20%;}
    #nav-icon3 span:nth-child(4)  {top: 22px;}

    header .arrow_wrap {width: 22px; height: 11px;}

    footer {height: auto;}
    footer .logo {display: block; float: none; text-align: center; margin: 0 auto 20px;}
    footer .bottom_part {padding: 30px 0 40px;}
    footer .bottom_part .contents {display: block; float: none; text-align: center; width: 100%; padding: 0;}
    footer .bottom_part .contents li {float: none; padding: 0 10px; margin: 0 0 5px;}
    footer .bottom_part .contents li::after {display: none;}

	footer.new .logo {width:auto; height:33px; text-align:center;}
	/*footer.new .logo a {background-position: center top; !important;}*/
	footer.new .logo a {background-position: center top !important; background-size:140px auto !important;}
}
@media screen and (max-width: 480px) {
    html, body {font-size: 0.8125em;}
    header {height: 50px;}
    .logo {width: 120px;}

	header.new{height: 70px;}
	/*
	header.new .logo{width: auto;}
	header.new .logo a {width:80px;}*/

    .hamburger_wrap {width: 22px;}
    #nav-icon3 {height: 18px;}
    #nav-icon3 span:nth-child(2),
    #nav-icon3 span:nth-child(3) {top: 9px; width: 80%; left: 20%;}
    #nav-icon3 span:nth-child(4)  {top: 18px;}

    header .arrow_wrap {width: 18px; height: 9px;}
    footer .top_part {height: 45px;}


}