/*동구청 대표홈페이지 서브들에 대한 css입니다.*/ /* 본문 */ #container { position:relative; z-index:10; width:100%; float: left; } #container .side {float:left; position:relative;} #container.side_none .side {display:none;} #container .side.sticky_start {position:fixed; top:0;} #container .side.sticky_end {position:absolute; bottom:0; left:0;} #container .side .side_menu {overflow-x:hidden; overflow-y:hidden; position:relative; padding-bottom:50px;} #container .side .side_menu .depth2_menu {overflow-x:hidden; overflow-y:scroll; position:relative;} @media screen and (max-width:800px) { #container .side {display:none;} } #container .colgroup {float:right;} #container.side_none .colgroup {float:none;} #container .colgroup #contents {min-height: 800px; position:relative; z-index:10; min-height:500px; margin-top:50px; padding-bottom:50px; letter-spacing:-0.05em;} @media screen and (max-width:800px) { #container .colgroup {float:none;} #container .colgroup #contents {padding-right:2.5%; padding-left:2.5%;} } @media screen and (max-width:640px) { #container .colgroup #contents {min-height:300px; margin-top:25px; padding-bottom:25px;} } #container .path ul.clearfix li {float:left;} #container .colgroup .sub_head {position:relative; z-index:20;} /* 컨텐츠 만족도 조사 & 담당자 정보 */ .satisfaction {clear:both; padding-bottom:50px; font-family:'Malgun Gothic', '맑은 고딕', sans-serif; margin-top: 40px; } .satisfaction .satisfaction_list {background-color:#626779;} .satisfaction .satisfaction_list .question {padding-top:14px; padding-right:10px; padding-bottom:14px; padding-left:70px; background-image:url('/user_res/images/common/satisfaction_question_icon.png'); background-repeat:no-repeat; background-position:32px 11px; color:#fff; font-size:15px; line-height:18px;} .satisfaction .satisfaction_list form { padding: 2%; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#d3d3d3; border-left-width:1px; border-left-style:solid; border-left-color:#d3d3d3; border-right-width:1px; border-right-style:solid; border-right-color:#d3d3d3; background-color:#fff; } .satisfaction .satisfaction_list form fieldset .input_radio {float:left; font-size:0;} .satisfaction .satisfaction_list form fieldset .input_radio .input_line {display:inline-block; margin-top:5px; margin-left:10px; vertical-align:middle;} .satisfaction .satisfaction_list form fieldset .input_radio .input_line:first-child {margin-left:0;} .satisfaction .satisfaction_list form fieldset .input_radio .input_line input[type='radio'] {display:inline-block; width:auto; height:auto; margin-top:0; margin-right:0; margin-bottom:0; margin-left:0; padding-top:0; padding-right:0; padding-bottom:0; padding-left:0; border-top-width:0; border-right-width:0; border-bottom-width:0; border-left-width:0; line-height:17px; vertical-align:middle;} .satisfaction .satisfaction_list form fieldset .input_radio .input_line label {display:inline-block; margin-left:3px; color:#333; font-size:15px; line-height:17px; vertical-align:middle;} .satisfaction .satisfaction_list form fieldset .opinion {float:right; font-size:0;} .satisfaction .satisfaction_list form fieldset .opinion input[type='text'] {display:inline-block; width:238px; height:29px; margin-top:0; margin-right:0; margin-bottom:0; margin-left:0; padding-top:0; padding-right:0; padding-bottom:0; padding-left:0; border-top-width:1px; border-top-style:solid; border-top-color:#aaa; border-right-width:0; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#aaa; border-left-width:1px; border-left-style:solid; border-left-color:#aaa; color:#333; font-size:15px; line-height:16px; text-indent:8px;} .satisfaction .satisfaction_list form fieldset .opinion input[type='submit'] {display:inline-block; width:90px; height:31px; margin-top:0; margin-right:0; margin-bottom:0; margin-left:0; padding-top:0; padding-right:0; padding-bottom:0; padding-left:0; border-top-width:0; border-right-width:0; border-bottom-width:0; border-left-width:0; background-color:#424655; color:#fff; font-size:14px; line-height:15px;} .satisfaction .manager_info {padding-top:14px; padding-right:33px; padding-bottom:19px; padding-left:33px; border-top-width:1px; border-top-style:solid; border-top-color:#d3d3d3; border-left-width:1px; border-left-style:solid; border-left-color:#d3d3d3; border-right-width:1px; border-right-style:solid; border-right-color:#d3d3d3; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#d3d3d3;} .satisfaction .satisfaction_list ~ .manager_info {border-top-width:0;} .satisfaction .manager_info ul li {float:left; margin-top:5px; margin-right:25px; padding-left:12px; background-image:url('/user_res/images/common/satisfaction_managerList_bu.gif'); background-repeat:no-repeat; background-position:left 10px; font-size:0;} .satisfaction .manager_info ul li span, #container .colgroup .satisfaction .manager_info ul li time {display:inline-block; vertical-align:middle;} .satisfaction .manager_info ul li .title {margin-right:12px; padding-right:14px; background-image:url('/user_res/images/common/satisfaction_managerTitle_line.gif'); background-repeat:no-repeat; background-position:right 3px; color:#333; font-size:15px; line-height:17px; font-weight:600;} .satisfaction .manager_info ul li .text {color:#333; font-size:15px; line-height:17px;} @media screen and (max-width:800px) { .satisfaction {padding-right:2.5%; padding-left:2.5%;} .satisfaction .satisfaction_list form {padding-top:20px; padding-bottom:20px;} .satisfaction .satisfaction_list form fieldset .input_radio {float:none;} .satisfaction .satisfaction_list form fieldset .opinion {float:none; position:relative; margin-top:20px; padding-right:90px;} .satisfaction .satisfaction_list form fieldset .opinion input[type='text'] {width:100%; box-sizing:border-box; height:31px;} .satisfaction .satisfaction_list form fieldset .opinion input[type='submit'] {position:absolute; top:0; right:0; } } @media screen and (max-width:640px) { .satisfaction {padding-bottom:25px;} .satisfaction .satisfaction_list .question {padding-top:10px; padding-bottom:10px; padding-left:50px; background-size:auto 20px; background-position:20px 9px;} .satisfaction .satisfaction_list form {padding-top:10px; padding-right:10px; padding-bottom:10px; padding-left:10px;} .satisfaction .manager_info {padding-top:5px; padding-right:20px; padding-bottom:10px; padding-left:20px;} .satisfaction .manager_info ul li {background-position:left 11px;} .satisfaction .manager_info ul li .title {background-position:right 4px; font-size:14px; line-height:16px;} .satisfaction .manager_info ul li .text {font-size:14px; line-height:15px;} } @media screen and (max-width:360px) { .satisfaction .satisfaction_list form fieldset .opinion {padding-right:0;} .satisfaction .satisfaction_list form fieldset .opinion input[type='text'] {border-right-width:1px; border-right-style:solid; border-right-color:#aaa;} .satisfaction .satisfaction_list form fieldset .opinion input[type='submit'] {display:block; width:100%; margin-top:10px; position:static;} } #container .sub_visual {height:200px; background-image:url('/user_res/images/sub/sub_visual_bg.jpg'); background-repeat:no-repeat; background-position:center top;} #sub02 #container .sub_visual {background-image:url('/user_res/images/sub/sub2_visual_bg.jpg');} #sub03 #container .sub_visual {background-image:url('/user_res/images/sub/sub3_visual_bg.jpg');} #sub04 #container .sub_visual {background-image:url('/user_res/images/sub/sub4_visual_bg.jpg');} #sub05 #container .sub_visual {background-image:url('/user_res/images/sub/sub5_visual_bg.jpg');} #sub06 #container .sub_visual {background-image:url('/user_res/images/sub/sub6_visual_bg.jpg');} #container .sub_visual .big_text {margin-bottom:20px; padding-top:65px; color:#fff; font-size:33px; line-height:35px;} #container .sub_visual .small_text {color:#fff; font-size:28px; line-height:19px;} @media screen and (max-width:800px) { #container .sub_visual {display:none;} } #container .side.sticky_start {top:88px;} #container .side {width:252px; margin-right:50px; margin-top: 30px; } #container .side .side_title {background:#396ac3 url('/user_res/images/sub/side_title_bg.gif') no-repeat left top;} #container .side .side_title .inner_wrap {padding-top:36px; padding-bottom:58px; /*background:url('/user_res/images/sub/side_title_bg.png') no-repeat 214px 8px;*/} #container .side .side_title strong {display:block; padding-top:24px; /*background:url('/user_res/images/sub/side_title_icon.png') no-repeat center top;*/ color:#fff; font-size:28px; line-height:29px; font-weight:400; text-align:center;} #container .side .side_menu .depth2_menu {line-height:0;} #container .side .side_menu .depth2_menu .depth2_list {border-top:1px solid #c5c5c5; transition-property:border-top-color, background-color; transition-duration:0.5s; transition-timing-function:cubic-bezier(1, 0, 0, 1);} #container .side .side_menu .depth2_menu .depth2_list.has {background:url('/user_res/images/sub/side_depth2NextMenu_icon.png') no-repeat 95% 23px;} #container .side .side_menu .depth2_menu .depth2_list.has.hover {background-image:url('/user_res/images/sub/side_depth2NextMenuIcon_hover.png');} #container .side .side_menu .depth2_menu .depth2_list.has.active, #container .side .side_menu .depth2_menu .depth2_list.has.actived {background-image:url('/user_res/images/sub/side_depth2NextMenuIcon_active.png');} #container .side .side_menu .depth2_menu .depth2_list.active, #container .side .side_menu .depth2_menu .depth2_list.actived {background-color:#218be1;} #container .side .side_menu .depth2_menu .depth2_list.active, #container .side .side_menu .depth2_menu .depth2_list.actived, #container .side .side_menu .depth2_menu .depth2_list:first-child {border-top-color:transparent;} #container .side .side_menu .depth2_menu .depth2_list .depth2_anchor {display:block; padding-top:17px; padding-right:10px; padding-bottom:17px; padding-left:20px; color:#222; font-size:18px; line-height:19px; transition:color 0.5s cubic-bezier(1, 0, 0, 1);} #container .side .side_menu .depth2_menu .depth2_list.has .depth2_anchor {padding-right:45px;} #container .side .side_menu .depth2_menu .depth2_list.hover .depth2_anchor {color:#616161;} #container .side .side_menu .depth2_menu .depth2_list .depth2_anchor[target='_blank'] {display:inline-block; margin-right:10px; padding-right:23px; background:url('/user_res/images/sub/side_depth2AnchorBlank_icon.png') no-repeat right 19px;} #container .side .side_menu .depth2_menu .depth2_list.has .depth2_anchor[target='_blank'] {margin-right:45px;} #container .side .side_menu .depth2_menu .depth2_list.hover .depth2_anchor[target='_blank'] {background-image:url('/user_res/images/sub/side_depth2AnchorBlankIcon_hover.png');} #container .side .side_menu .depth2_menu .depth2_list.active .depth2_anchor[target='_blank'], #container .side .side_menu .depth2_menu .depth2_list.actived .depth2_anchor[target='_blank'] {background-image:url('/user_res/images/sub/side_depth2AnchorBlankIcon_active.png');} #container .side .side_menu .depth2_menu .depth2_list.active .depth2_anchor, #container .side .side_menu .depth2_menu .depth2_list.actived .depth2_anchor {color:#fff;} #container .side .side_menu .depth2_menu .depth2_list.active .depth2_anchor:hover, #container .side .side_menu .depth2_menu .depth2_list.actived .depth2_anchor:hover {text-decoration:none;} #container .side .side_menu .depth2_menu .depth2_list .depth3_menu {display:none; padding:20px; background-color:#f8f8f8;} #container .side .side_menu .depth2_menu .depth2_list.actived .depth3_menu {display:block;} #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list {margin-top:21px;} #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list.has {background:url('/user_res/images/sub/side_depth3NextMenu_icon.png') no-repeat 94% 4px;} #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list.has.hover {background-image:url('/user_res/images/sub/side_depth3NextMenuIcon_hover.png');} #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list.has.active, #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list.has.actived {background-image:url('/user_res/images/sub/side_depth3NextMenuIcon_active.png');} #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list:first-child {margin-top:0;} #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list .depth3_anchor {display:block; color:#222; font-size:16px; line-height:17px; transition:color 0.5s cubic-bezier(1, 0, 0, 1);} #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list.has .depth3_anchor {margin-right:21px;} #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list.hover .depth3_anchor {color:#000;} #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list.active .depth3_anchor, #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list.actived .depth3_anchor {display:inline-block; border-bottom:1px dotted #1b3767; color:#1649a5; font-weight:600;} #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list.active .depth3_anchor:hover, #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list.actived .depth3_anchor:hover {text-decoration:none;} #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list .depth3_anchor[target='_blank'] {display:inline-block; margin-right:10px; padding-right:18px; background:url('/user_res/images/sub/side_depth3AnchorBlank_icon.png') no-repeat right 2px;} #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list.has .depth3_anchor[target='_blank'] {margin-right:21px;} #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list.hover .depth3_anchor[target='_blank'] {background-image:url('/user_res/images/sub/side_depth3AnchorBlankIcon_hover.png');} #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list.active .depth3_anchor[target='_blank'], #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list.actived .depth3_anchor[target='_blank'] {background-image:url('/user_res/images/sub/side_depth3AnchorBlankIcon_active.png');} #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list .depth4_menu {display:none; margin-top:12px; padding:15px; border:1px solid #dcdcdc; background-color:#fff;} #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list.actived .depth4_menu {display:block;} #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list .depth4_menu .depth4_list {margin-top:10px; padding-left:11px; background:url('/user_res/images/sub/side_depth4List_bu.png') no-repeat left 6px;} #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list .depth4_menu .depth4_list.active {background-image:url('/user_res/images/sub/side_depth4ListBu_hover.png');} #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list .depth4_menu .depth4_list.actived {background-image:url('/user_res/images/sub/side_depth4ListBu_active.png');} #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list .depth4_menu .depth4_list:first-child {margin-top:0;} #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list .depth4_menu .depth4_list .depth4_anchor {display:block; padding-right:10px; color:#7b7b7b; font-size:16px; line-height:17px; transition:color 0.5s ease-in-out;} #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list .depth4_menu .depth4_list .depth4_anchor[target='_blank'] {display:inline-block; margin-right:10px; padding-right:19px; background:url('/user_res/images/sub/side_depth4AnchorBlank_icon.png') no-repeat right 2px;} #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list .depth4_menu .depth4_list.active .depth4_anchor[target='_blank'] {background-image:url('/user_res/images/sub/side_depth4AnchorBlankIcon_hover.png');} #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list .depth4_menu .depth4_list.actived .depth4_anchor[target='_blank'] {background-image:url('/user_res/images/sub/side_depth4AnchorBlankIcon_active.png');} #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list .depth4_menu .depth4_list.active .depth4_anchor {color:#333;} #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list .depth4_menu .depth4_list.actived .depth4_anchor {color:#2761c5;} #container .side .side_menu .depth2_menu .depth2_list .depth3_menu .depth3_list .depth4_menu .depth4_list.actived .depth4_anchor:hover {text-decoration:none;} #container .colgroup {width:890px;} #container .colgroup .sub_head { padding-top: 20px; display: inline-block; width: 100%; } #container .colgroup .sub_head .rowgroup {margin-top: 10px; float: right; } .path {float:left; margin-right:15px; padding-top:15px; padding-bottom: 15px; } .path ul li {margin-left:15px; padding-left:15px; background:url('/user_res/images/common/path_list_icon.png') no-repeat left 3px; color:#6d6d6d; font-size:16px; line-height:17px;} .path ul li:first-child {margin-left:0; padding-left:25px; background-image:url('/user_res/images/common/path_list_homeIcon.png'); background-position:left 2px;} .path ul li.actived {color:#222;} #container .colgroup .sub_head .rowgroup .addons {float:left; padding-top:5px; font-size:0;} #container .colgroup .sub_head .rowgroup .addons button {display:inline-block; position:relative; margin-left:5px; border:1px solid #bbb; border-radius:100%; width:34px; height:34px;} #container .colgroup .sub_head .rowgroup .addons button:first-child {margin-left:0;} #container .colgroup .sub_head .rowgroup .addons button span {display:block; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; font-size:0;} #container .colgroup .sub_head .rowgroup .addons button.print span {background-image:url('/user_res/images/common/addons_printIcon_off.png');} #container .colgroup .sub_head .rowgroup .addons button.print:hover span {background-image:url('/user_res/images/common/addons_printIcon_on.png');} #container .colgroup .sub_head .sub_title {padding-bottom:30px; border-bottom:2px solid #000; clear: both; } #container .colgroup .sub_head .sub_title h2 {color:#222;font-size:34px; line-height:36px;} /*미디어쿼리*/ @media screen and (max-width:1250px) { #container .side { width: 21%; margin-right: 3%; } #container .colgroup{ width: 76%; } } @media screen and (max-width:991px) { #container .side { display: none; } #container .colgroup { width: 90%; float: none; margin: 0 auto; } } @media screen and (max-width:800px) { #container .colgroup {width:auto;} #container .colgroup .sub_head .rowgroup {display:none;} #container .colgroup .sub_head .sub_title { border-bottom:1px dashed #ddd; } #container .colgroup .sub_head .sub_title h2 { font-size:22px; line-height:26px; text-align:center; } } @media screen and (max-width:770px) { #container { margin: 50px 0 0; } #container .colgroup .sub_head { padding-top: 0; } } @media screen and (max-width:640px) { #container .colgroup .sub_head .sub_title {padding-bottom:25px;} } @media screen and (max-width:500px) { #container { margin: 40px 0 0; } } /*imsi css*/ .weblink_subtit { clear: both; font-size: 20px; line-height: 32px; font-weight: 600; margin: 0 0 2%; color: #333333; padding: 10px 0 0 20px; background: url(/user_res/images/common/lnb_m_depth4AnchorBlankIcon_on.png) no-repeat 0 71%; border-top: 1px dashed #dddddd; } .area_weblink { padding: 2% 2% 1%; background: rgba(232, 237, 247, 0.74); } .area_weblink .tab { margin-top: 0; } .area_weblink .tab li { float: left; width: 32.66%; margin-bottom: 1%; margin-right: 1%; } .area_weblink .tab li:nth-of-type(3n) { margin-right: 0; } .area_weblink .tab li a { padding: 0; background: #ffffff; } .area_weblink .tab li a:hover { background: #2d374d; color: #ffffff; font-weight: 600; }