#section1 {height:900px;background: #4689cd url(/images/portal/main/main_v1_ss.jpg) no-repeat center top;position: relative;} /*main_v1_s ë´„ / main_v1_ss 여름 / main_v1_sss2 가을 / main_v1_sss_1 겨울 */ #section2 {clear:both;position: relative;height:730px;background:url(/images/portal/main/main_v2.jpg) no-repeat center top;} #section3 {clear:both;position: relative;height:870px;background:#f3f3f3;} #section4 { clear:both; height:290px; background:#51596c url(/images/portal/main/link_bar.gif) no-repeat center top; width:100%; } .floor1 { position:relative; z-index:10; width:1200px; margin:0 auto; } .floor1 .weather {padding: 37px 0px 30px 30px;} .floor1 .weather div { display:inline-block; } .floor1 .main_search {position:absolute;left: 380px;top: 45px;} .floor1 .main_search .msearch {border:2px solid #3f67ad;background:#fff;height:39px;border-radius:25px;padding: 3px 10px;padding-right: 70px;} .floor1 .main_search .msearch_btn{position:absolute;top: 10px;right: 10px;} .floor1 .main_search .msearch select, .floor1 .main_search .msearch input { border:0px; margin:5px 5px 0 15px; } .floor1 .main_search .msearch select{display:none;} .floor1 .main_search .word {margin: 8px 0 0 0px;text-align: center;color:#fff;} .floor1 .main_search .word a {color:#fff;} .floor1 .symbol {position:absolute;right:0px;top: -12px; z-index:-1;} .floor1 .block_1 { float:left; width:580px; height:520px; transition:height 2s ease-in-out; box-shadow:0 10px 20px rgba(0,0,0,0.2); margin-right:20px; } .floor1 #move1 {background:url(/images/portal/main/move1_bg.jpg) no-repeat center top;} #move1 #mc_visual {float:left;position:relative;width:580px;height:520px;z-index: 0;} #move1 #mc_visual .control {display: block;position:absolute; right:0; bottom:0; z-index:2; } #move1 #mc_visual .control button {display:block; float:left; width:46px; height:40px; font-size:0; line-height:0;} #move1 #mc_visual .control button.btn_prev { background:url(/images/portal/main/news_prev.gif) no-repeat center center;} #move1 #mc_visual .control button.btn_stop { background:url(/images/portal/main/news_stop.gif) no-repeat center center;} #move1 #mc_visual .control button.btn_play { display:none;background:url(/images/portal/main/news_play.gif) no-repeat center center;} #move1 #mc_visual .control button.btn_next { background:url(/images/portal/main/news_next.gif) no-repeat center center;} #move1 #mc_visual .control .bx-controls { float:left; width:60px; height:40px; background:#0b3877; color:#ffffff; font-family:NanumS; font-size:17px; line-height:40px; text-align:center;} #move1 #mc_visual .control .bx-controls_n span { margin:0 3px;} #move1 #mc_visual #slider_visual {overflow: hidden;position: relative;width: 100%;} #move1 #mc_visual .img_area { width:100%; height:520px;} #move1 #mc_visual .img_area a { display:block; font-size:22px; font-weight:600; color:#ffffff; text-align:center;} #move1 #mc_visual .img_area a:focus { border:1px dotted #ddd;} /* bx-viewport */ .bx-viewport > ul > li a { display: block; } /*keyboard_focus */ .keyboard_focus .bx-wrapper { height: 100% !important; } .keyboard_focus .bx-viewport { overflow:auto !important; height: 100% !important; } .keyboard_focus .bx-viewport > ul { height: 100%; transform: translate3d(0, 0px, 0px) !important; overflow: hidden; } .keyword-wrap {background: rgb(255, 255, 255);padding: 4px 0px 0px;color: rgb(206, 206, 206);margin-top: -30px;border-radius:10px;position: relative;z-index: 999;box-shadow: 0 10px 20px rgba(0,0,0,0.2);} .keyword-wrap ul { margin-top:10px; } .keyword-wrap ul li { padding:0 10px; } @media only screen and (max-width:970px) { #section1 { height:auto; background-image:none; } #section3 { height:auto; } .floor1 .block_1 { width:100%; height:100%; } #move1 #mc_visual { width:100%; height:100%; } #move1 #mc_visual .control {bottom:4px; } #move1 #mc_visual .img_area img{ width:100%; height:100%;} #move1 #mc_visual .img_area { height:100%; } } @media only screen and (max-width:640px) { } /*popup zone*/ #move1 .popup {float:left;position:relative;width:290px;height:250px;background:#fff;margin-right:20px;transition:height 2s ease-in-out;box-shadow:0 10px 20px rgba(0,0,0,0.2);z-index: -1;} #move1 .popup h2 { position:absolute; bottom:10px; left:20px; /*padding-left:20px; height:40px; font-size:20px; color:#ffffff; font-weight:normal; line-height:50px;*/} #move1 .popup .popup_control{ display: block; position:absolute; bottom:10px; right:15px; } #move1 .popup .popup_control button {display:block;float:left; width:19px; height:19px; margin-left:1px; font-size:0; line-height:0;} #move1 .popup .popup_control button.btn_prev { background:url(/images/portal/main/popup_prev.gif) no-repeat;} #move1 .popup .popup_control button.btn_pause { background:url(/images/portal/main/popup_stop.gif) no-repeat;} #move1 .popup .popup_control button.btn_play { background:url(/images/portal/main/popup_play.gif) no-repeat;} #move1 .popup .popup_control button.btn_next { background:url(/images/portal/main/popup_next.gif) no-repeat;} #move1 .popup .popup_control a.more { margin-left:4px;} #move1 .popup .popup_wrap {overflow: hidden;position: relative;z-index:1; width: 290px;height:210px; background:#fff;} #move1 .popup ul.popup_list img{width:290px; height:210px;} #move1 .popup ul.popup_list a {display:block;} #move1 .popup ul.popup_list a:focus { border:1px dotted #ddd;} /*mayor_group*/ #move1 .mayor_group { float:left; width:290px; transition:height 2s ease-in-out; box-shadow:0 10px 20px rgba(0,0,0,.2);} #move1 .mayor_group .mayor { overflow:hidden; position:relative; height:250px; background:url(/upload_data/board_data/BBS_0000248/160516079316739.jpg) no-repeat right bottom;} /*#move1 .mayor_group .mayor { overflow:hidden; position:relative; height:250px; background:url(/images/portal/main/main_mayor_bg.jpg) no-repeat right bottom;}*/ /**#move1 .mayor_group .mayor.img{background:url(/upload_data/board_data/BBS_0000248/152965124063973.jpg) no-repeat right bottom;}**/ /**#move1 .mayor_group .mayor.img{background: url(/upload_data/board_data/BBS_0000248/156203289507159.jpg) no-repeat right bottom;} #move1 .mayor_group .mayor.img{background: url(/upload_data/board_data/BBS_0000248/156203432015952.jpg) no-repeat right bottom;}**/ #move1 .mayor_group .mayor.img{background:#9fa09f url(/upload_data/board_data/BBS_0000248/161887926344597.jpg) no-repeat right bottom;} /* #move1 .mayor_group .mayor.img{background: url(/images/portal/main/mayor_bg_20200318.jpg) no-repeat right bottom;background-size: 106%;} */ #move1 .mayor_group .mayor .text {position:relative;z-index:11;margin: 17px 0 5px;font-size:18px;color:#ffffff;padding: 0px 0 7px 13px;line-height:26px;} #move1 .mayor_group .mayor u { font-size:24px; text-decoration:none; } #move1 .mayor_group .mayor ul li {float:left;width: 65px;height: 65px;margin: 68px 0 0 5px;} #move1 .mayor_group .mayor ul li:first-child { margin-left:15px; } #move1 .mayor_group .mayor ul li a {display:block;color:#ffffff;font-size:15px;font-weight:600;line-height: 1em;text-align:center;padding-top: 16px;height: 55px;} #move1 .mayor_group .mayor ul li.bt01 { background-color:rgba(139,91,7,1); border-radius:50%; } #move1 .mayor_group .mayor ul li.bt02 { background-color:rgba(6,158,145,1); border-radius:50%; } #move1 .mayor_group .mayor ul li.bt02 a{padding-top: 23px;} #move1 .mayor_group .mayor ul li.bt03 { background-color:rgba(28,120,213,1); border-radius:50%; } @media only screen and (max-width:970px) { #move1 .popup {width:50%; margin-left:0; margin-right:0px; } #move1 .popup .popup_wrap { width:100%; margin:0 auto; } #move1 .popup ul.popup_list img { width:100%; } #move1 .mayor_group { width:50%; box-shadow:none; } #move1 .mayor_group .mayor { width:100%; background:url(/images/portal/main/main_mayor_bg_m.jpg) no-repeat right bottom;} #move1 .mayor_group .mayor.img{background:#9fa09f url(/upload_data/board_data/BBS_0000248/160577202720704.png) no-repeat right bottom;} } @media only screen and (max-width:640px) { #move1 .popup { width:100%; margin-top:-5px; } #move1 .mayor_group { width:100%; } } /* board­ */ #move1 .board { float:left; position:relative; width:600px; height:250px; background:#fff; margin:20px 0; } #move1 .board ul li{display:inline;float: left;padding:0;} #move1 .board ul li a.tab_btn{display: block; padding:2px 25px 0; height:50px; background:#1d5ea2; color:#ffffff; font-size:16px;line-height:50px;} #move1 .board ul li a.tab_btn:focus { border:1px dotted #ddd;} #move1 .board ul li.active a.tab_btn{background:#ffffff; color:#336ac0; font-weight:600; font-size:18px;} #move1 .board ul li img{margin-left:5px;vertical-align:top} #move1 .board ul div.tabcontent{position: absolute;top:53px;left:0;width:100%; height:156px; padding:25px 0 10px; background:#ffffff;} #move1 .board ul ul{ padding:0 5%; width:90%;} #move1 .board ul ul li{ width:95%;margin:0;padding:0 0 0 20px;background: url(/images/portal/common/board_bu.gif) no-repeat 3px 13px; text-align:right;} #move1 .board ul ul li a{display:inline-block; float:left; width: 80%; padding:0; font-size:15px;color:#1b1b1b;line-height:30px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;} #move1 .board ul ul li img { vertical-align:middle;} #move1 .board ul ul li span.date { display:inline-block; padding-top:5px; font-size:12px; color:#898989; text-decoration:none; } #move1 .board .more a{ display:block; position: absolute; top: -53px;right: 0; width: 54px; height:52px; background:#1d5ea2 url(/images/portal/main/board_more.png) no-repeat center; font-size: 0;line-height: 0;} @media only screen and (max-width:970px) { #move1 { margin-top:0; } #move1 .board { width:100%; box-sizing:border-box; } #move1 .board ul li { width:18%;} #move1 .board ul li a.tab_btn{ padding:2px 0 0; background:#6694d4; color:#ffffff; text-align:center;} #move1 .board ul li.active a.tab_btn{ padding-top:2px; border:none; text-align:center;} #move1 .board .more a { width:10%; } #move1 .board ul ul li a{ width: 70%; } } @media only screen and (max-width:540px) { #move1 .board { padding-bottom:20px; background:#ffffff; margin:0px; } #move1 .board ul div.tabcontent { padding-top:10px;} } @media only screen and (max-width:500px) { #move1 .board ul li a.tab_btn { font-size:13px; } #move1 .board ul li.active a.tab_btn{ font-size:13px} } /* service_group */ .service_group { position: relative; height:155px; transition:height 2s ease-in-out; box-shadow:5px 3px 10px rgba(0,0,0,0.2); margin: 10px 0 0 0; padding: 0; clear:both; background:#fff; } .service_group section { float: left; width: 25%; } .service_group section > button { width: 100%; background-color: #eff2f5; border-left: 1px solid #d4d7d9; border-right: 1px solid #fff; color: #4d4d4d; font-size: 17px; line-height: 50px; } .service_group section > button:hover, .service_group section > button.open { color: #fff; background-color: #1997c3; } .service_group section > button span { display: inline-block; padding: 0 22px 0 0; background: url(/images/portal/main/service_ti.png) no-repeat right 50%; } .service_group section > button:hover span, .service_group section > button.open span { background: url(/images/portal/main/service_ti_on.png) no-repeat right 21px; } .service_group .service_citizen > button:hover, .service_group .service_citizen > button.open { color: #fff; background:#2566c2; } .service_group .service_citizen > button:hover span, .service_group .service_citizen > button.open span { background-position: right 21px; } .service_group .service_complaints > button:hover, .service_group .service_complaints > button.open { color: #fff; background:#63A013;} .service_group .service_complaints > button:hover span, .service_group .service_complaints > button.open span { background-position: right -32px; } .service_group .service_enterprise > button:hover, .service_group .service_enterprise > button.open { color: #fff; background:#ee6b1c;} .service_group .service_enterprise > button:hover span, .service_group .service_enterprise > button.open span { background-position: right -84px; } .service_group .service_area > button { border-left: none; } .service_group .service_enterprise > button { border-right: none; } .srvc_wrap { display: none; position: absolute; top: 50px; left: 0; width: 100%; height: 105px; overflow: hidden; background-color: #fff; } .srvc_wrap .icon_list { position: relative; width: 98%; margin: 0; } .srvc_wrap .icon_list li { float: left; width: 9.7%; height: 103px; text-align: center; } .srvc_wrap .icon_list li a { display: block; } .srvc_wrap .icon_list li a i { display: block; width: 65px; height: 65px; margin: 0px auto 0 auto; background-repeat: no-repeat; background-position: 50%; } .srvc_wrap .icon_list li:first-child { margin-left:25px;} .srvc_wrap .icon_list li a:hover span { background: #23a3d0; color: #fff; padding:3px 10px; border-radius:3px; } /* .srvc_wrap .icon_list li {position:relative;height:90px;margin:1px 1px 0 0;border:1px solid #fff;border-radius:1px} .srvc_wrap .icon_list li a {position:relative;z-index:1;height:90px;} .srvc_wrap .icon_list li::before, .srvc_wrap .icon_list li a::before, .srvc_wrap .icon_list li::after{position:absolute;left:0;right:100%;height:1px;content:'';} .srvc_wrap .icon_list li::before{top:5px} .srvc_wrap .icon_list li::after{bottom:-1px} .srvc_wrap .icon_list li:hover::before, .srvc_wrap .icon_list li:hover::after{right:0;transition-property:right;transition-duration:0.8s;background:linear-gradient(to right, #86aaff, #70bc4c, #ffbe00, #f46e85)} .srvc_wrap .icon_list li:hover .srvc_wrap .icon_list li::before{top:-1px;bottom:-1px;left:auto;right:-1px;width:1px;height:100px;transition-property:height;transition-delay:0.8s} */ .srvc_wrap .service_title { float: left; position: relative; width: 30.833333%; height: 100%; } .srvc_wrap .service_title i { display: block; position: absolute; top: 0; left: 30px; bottom: 0; margin: auto 0; background: url(/images/portal/main/service_img.png) no-repeat; } .srvc_wrap .service_title h4 { margin: 25px 0 0 140px; font-family: Oseong; font-size: 27px; line-height: 31px; } .srvc_wrap .service_title p { margin: 8px 0 0 140px; font-size: 12px; letter-spacing: -1px; line-height: 16px; } .srvc_wrap .text_list { display: block; float: left; width: 69.166666%; padding: 10px 0 0 0; } .srvc_wrap .text_list li { display: block; float: left; width: 20%; } .srvc_wrap .text_list li span { display: inline-block; margin: 0; padding: 5px 10px; background: url(/images/portal/main/service_img.png) no-repeat left -85px; border-radius: 5px; font-size: 14px; letter-spacing:-1px; line-height: 16px; } .srvc_wrap .text_list li a:hover span { background: #2566c2; color: #fff; } .service_citizen .srvc_wrap .service_title i { width: 79px; height: 75px; background-position: left top; } .service_citizen .srvc_wrap .service_title h4, .service_citizen .srvc_wrap .service_title p { color: #2566c2; } .service_complaints .srvc_wrap .service_title i { width: 98px; height: 78px; background-position: -100px top; } .service_complaints .srvc_wrap .service_title h4, .service_complaints .srvc_wrap .service_title p { color: #63A013; } .service_complaints .srvc_wrap .text_list li a:hover span { background-color: #63A013; } .service_enterprise .srvc_wrap .service_title i { width: 80px; height: 77px; background-position: -227px top; } .service_enterprise .srvc_wrap .service_title h4, .service_enterprise .srvc_wrap .service_title p { color: #ee6b1c; } .service_enterprise .srvc_wrap .text_list li a:hover span { background-color: #ee6b1c; } .service_area .srvc_wrap { display: block; } .service_ctrl { /*display:none;*/ position: absolute; top: 25px; right: 10px; width: 25px; } .service_ctrl button { width: 25px; height: 25px; margin: 2px 0; background: url(/images/portal/main/service_prev.png) no-repeat 50%; border: 1px solid #a1bde1; font-size: 0; line-height: 0; text-indent: -9999px; } .service_ctrl button.service_next { background-image: url(/images/portal/main/service_next.png); } @media all and (max-width: 800px) { .service_group { margin: 0; } .srvc_wrap .icon_list li { width: 16.666667%; } } @media all and (max-width: 640px) { .service_group { height: auto; margin: 10px 0 0 0; } .service_group section { width: 100%; } .service_group section button { border-top: 1px solid #cacaca; border-right: none; } .srvc_wrap { position: relative; top: inherit; left: inherit; } .srvc_wrap .service_title { display: none; } .srvc_wrap .icon_list li { width: 33.333333%; } .srvc_wrap .text_list { width: 96%;padding:10px 2%; } .srvc_wrap .text_list li { width: 33.333333%; } .service_citizen .srvc_wrap .text_list li,.service_complaints .srvc_wrap .text_list li { width: 50%; } .service_citizen .srvc_wrap, .service_complaints .srvc_wrap, .service_enterprise .srvc_wrap { height: auto; } .service_ctrl { display:block; } } @media all and (max-width: 320px) { .srvc_wrap .text_list { padding: 3%; } .srvc_wrap .text_list li { width: 50%; } } /* colgroup2 */ .colgroup2 { margin: 10px 0 0 0; } /* rowgroup2 */ .rowgroup2 { float: left; width: 49.583336%; margin: 0; } @media all and (max-width: 800px) { .rowgroup2 { width: 100%; margin: 0; } } @media all and (max-width: 640px) { .rowgroup2 { margin: 0; } } .floor2 { position:relative; z-index:10; width:1200px; margin:0px auto; padding:80px 0; } .floor2 .minwon_tit { width:265px; float:left; background:url(/images/portal/main/minwon_tit_bg.png) no-repeat right bottom; height:290px; } .floor2 .minwon_tit h3 { font-size:38px; letter-spacing:-2px; } .floor2 .minwon_tit p { font-size:18px; margin-top:30px; line-height:140%; } .floor2 .minwon_cont { float:right; margin-bottom:30px; } .floor2 .banner_link { clear:both; } .floor2 .banner_link li { float:left; width:285px; height:250px; margin-left:20px; color:#fff; transition:height 2s ease-in-out; box-shadow:5px 3px 10px rgba(0,0,0,0.2);} .floor2 .banner_link li:first-child { margin-left:0px; } .floor2 .banner_link li h3 { font-size:30px; font-weight:normal; letter-spacing:-3px; margin:50px 0 20px 30px; } .floor2 .banner_link li p { margin:0px 0 20px 30px; } .floor2 .banner_link li a { margin:0px 0 0px 30px; } .floor2 .banner_link li a:hover{ background:#1f364a; } .floor2 .banner_link li.c01 { background:#49637c url(/images/portal/main/c01_bg.png) no-repeat right 50px; } .floor2 .banner_link li.c02 { background:#2aa0ab url(/images/portal/main/c02_bg.png) no-repeat right 50px; } .floor2 .banner_link li.c03 { background:#4292e3 url(/images/portal/main/c03_bg.png) no-repeat right 50px; } .floor2 .banner_link li.c04 { background:#284a81 url(/images/portal/main/c04_bg.png) no-repeat right top; } /* mc_often */ #mc_often { width:900px; height:290px; transition:height 2s ease-in-out; box-shadow:0 10px 20px rgba(0,0,0,0.2); } #mc_often li span {background-image:url(/images/portal/main/mc_quick_icon1.png)} @media only screen and /* (-webkit-min-device-pixel-ratio:2), */(min-resolution: 192dpi) { /* #mc_often li span {background-image:url(/images/portal/main/mc_quick_icon@2.png)*/} #mc_often { background:#fff; } #mc_often li { float:left; width:180px } #mc_often li a {position:relative; display:block; height:145px; border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0; text-align:center;text-decoration:none;transition:border-color .3s, background .3s; font-size: 14px; background:#fff;} #mc_often li span {display:inline-block;position:relative;top:27px;padding-top:70px;background-size:62px 1800px;background-repeat:no-repeat;transition:background-position .3s} #mc_often li a:hover, #mc_often li a:active, #mc_often li a:focus {color:#fff;background:#4192e3;/*6282be*/;font-weight:700} #mc_often li.bg1 span {background-position:50% 0} #mc_often li.bg1 a:hover span, #mc_often li.bg1 a:active span, #mc_often li.bg1 a:focus span {background-position:50% -80px} #mc_often li.bg2 span {background-position:50% -160px} #mc_often li.bg2 a:hover span, #mc_often li.bg2 a:active span, #mc_often li.bg2 a:focus span {background-position:50% -245px} #mc_often li.bg3 span {background-position:50% -340px} #mc_often li.bg3 a:hover span, #mc_often li.bg3 a:active span, #mc_often li.bg3 a:focus span {background-position:50% -430px} #mc_often li.bg4 span {background-position:50% -520px} #mc_often li.bg4 a:hover span, #mc_often li.bg4 a:active span, #mc_often li.bg4 a:focus span {background-position:50% -599px} #mc_often li.bg5 span {background-position:50% -690px} #mc_often li.bg5 a:hover span, #mc_often li.bg5 a:active span, #mc_often li.bg5 a:focus span {background-position:50% -780px} #mc_often li.bg6 span {background-position:50% -870px} #mc_often li.bg6 a:hover span, #mc_often li.bg6 a:active span, #mc_often li.bg6 a:focus span {background-position:50% -940px} #mc_often li.bg7 span {background-position:50% -1040px} #mc_often li.bg7 a:hover span, #mc_often li.bg7 a:active span, #mc_often li.bg7 a:focus span {background-position:50% -1130px} #mc_often li.bg8 span {background-position:50% -1240px} #mc_often li.bg8 a:hover span, #mc_often li.bg8 a:active span, #mc_often li.bg8 a:focus span {background-position:50% -1330px} #mc_often li.bg9 span {background-position:50% -1440px} #mc_often li.bg9 a:hover span, #mc_often li.bg9 a:active span, #mc_often li.bg9 a:focus span {background-position:50% -1530px} #mc_often li.bg10 span {background-position:50% -1650px} #mc_often li.bg10 a:hover span, #mc_often li.bg10 a:active span, #mc_often li.bg10 a:focus span {background-position:50% -1740px} @media all and (max-width: 970px) { .floor2 .minwon_tit { display:none; } #mc_often { width:100%; } #mc_often li { width:20% } .floor2 { padding:20px 0; } .floor2 .banner_link li { width:50%; margin-left:0px;} } @media all and (max-width: 640px) { #mc_often { height:435px; } #mc_often li { width:33.3% } .floor2 .banner_link li.c01, .floor2 .banner_link li.c02, .floor2 .banner_link li.c03, .floor2 .banner_link li.c04 { background-image:none; } } .floor3 { position:relative; z-index:10; width:1200px; margin:0px auto; padding:80px 0; } .floor3 .sns_tit { text-align:center; } .floor3 .sns_tit h3 { font-size:38px; letter-spacing:-2px; } .floor3 .sns_tit p { font-size:18px; margin-top:30px; line-height:140%; } .floor3 .snsArea { float:left; margin-top:60px; transition:height 2s ease-in-out; box-shadow:5px 3px 10px rgba(0,0,0,0.2);} .floor3 .snsArea .tabSNS{position:relative;} .floor3 .snsArea .tabSNS .m1{position:absolute; width:125px; height:40px; left:0px;} .floor3 .snsArea .tabSNS .m2{position:absolute; width:125px; height:40px; left:125px;} .floor3 .snsArea .tabSNS .m3{position:absolute; width:126px; height:40px; left:250px;} .floor3 .snsArea .tabSNS .m1 a, .floor3 .snsArea .tabSNS .m2 a, .floor3 .snsArea .tabSNS .m3 a{line-height:43px; font-family:'nanumS'; font-size:15px; font-weight:600;text-align:center; width:100%; height:100%; display:block; background:#dadada; border-left:1px solid #fff;} .floor3 .snsArea .tabSNS h5:first-child a{border-left:0;} .floor3 .snsArea .tabSNS .m1 a.current{background:#29528a; color:#fff;} .floor3 .snsArea .tabSNS .m2 a.current{background:#0677bb; color:#fff;} .floor3 .snsArea .tabSNS .m3 a.current{background:#d13553; color:#fff;} .floor3 .snsArea .list_box{position:absolute; top:40px;} #instafeed{margin:10px; background:#fff; overflow:hidden; padding:5px 6px; box-shadow:0 1px 2px rgba(0, 0, 0, .12);} #instafeed a{display:block; float:left; padding:10px 6px} #instafeed a img{border-radius:9px; box-shadow:0 1px 2px rgba(0, 0, 0, .42);} .floor3 .snsArea { float:left; margin-top:60px; transition:height 2s ease-in-out; box-shadow:5px 3px 10px rgba(0,0,0,0.2);} /* SNS */ .newsBox{float:left;margin-bottom:19px;padding-left:10px;width:789px} .newsBox .snsTitle{margin-bottom:10px;padding-left:5px} #mStoryCon1 .snsTitle{margin-top:-40px;text-align:right} .newsBox .snsTitle .control{display:inline-block} .newsBox .snsTitle .control button{margin:0 3px;width:30px;height:30px;text-indent:-999px;overflow:hidden;background-color:#fff;background-repeat:no-repeat;background-position:center center;border-radius:50%} .newsBox .snsTitle .control .prev-slide{background-image:url('/images/portal/main/before_s.png')} .newsBox .snsTitle .control .next-slide{background-image:url('/images/portal/main/next_s.png')} .newsBox ul::after {display:block;clear:both;content:''} .newsBox ul li { position:relative; float:left; width:248px; margin:20px 15px 0 0; transition:height 2s ease-in-out; box-shadow:5px 3px 10px rgba(0,0,0,0.2); background:#fff;} .newsBox ul li > div { position:relative; height:265px; } .newsBox ul li img {width:100%;height:100%;object-fit: cover;} .newsBox ul li img.noImg {background:#e7ebed url('/img/sasang/main/noimg.png') no-repeat center 35%;} .newsBox ul li .divis {position:absolute;top:0;right:0;width:90px;height:38px;font-size:13px;color:#fff;line-height:38px;font-weight:bold;text-align:center;overflow:hidden;transition: all 0.3s;z-index:2;} .newsBox ul li .divis a { color:#fff; white-space:nowrap; overflow:hidden;text-indent:0;text-overflow:ellipsis;transition: all 0.3s;} .newsBox ul li .divis a:hover {text-indent:-160px;transition: all 0.3s;} .newsBox ul li .divis a::after {position:absolute;top:0;left:0;width:100%;text-indent:300px;content:'더보기'; transition: all 0.3s;} .newsBox ul li .divis a:hover::after{text-indent:0;} .newsBox ul li .photo{display:block;height:190px;overflow:hidden;background:#fff;} .newsBox ul li a { display:block } .newsBox ul li .tit { position:absolute; left:0; bottom:0px; width:218px; padding:10px 15px; height:55px; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition: all 0.2s;} .newsBox ul li .date { color:#aaa; font-size:13px; } .newsBox ul li a:hover .tit { height:195px; font-size:22px; line-height:30px; white-space:normal; padding-top:60px; color:#fff; } .newsBox ul li a:hover .date { color:#fff; } .newsBox ul li a:focus .tit { height:195px; font-size:22px; line-height:30px; white-space:normal; padding-top:60px; color:#fff; } .newsBox ul li a:focus .date { color:#fff; } .newsBox ul li .div1 .divis{background:rgba(26,168,148,0.9)} .newsBox ul li .div2 .divis{background:rgba(0,135,197,0.9)} .newsBox ul li .div3 .divis{background:rgba(243,111,35,0.9)} .newsBox ul li .div4 .divis{background:rgba(0,135,197,0.9)} .newsBox ul li .div5 .divis{background:rgba(26,168,148,0.9)} .newsBox ul li .div6 .divis{background:rgba(0,135,197,0.9)} .newsBox ul li .div1 a:hover .tit{background:rgba(2,88,76,0.85);} .newsBox ul li .div2 a:hover .tit{background:rgba(0,105,154,0.9)} .newsBox ul li .div3 a:hover .tit{background:rgba(205,83,13,0.9)} .newsBox ul li .div4 a:hover .tit{background:rgba(205,83,13,0.9)} .newsBox ul li .div5 a:hover .tit{background:rgba(0,105,154,0.9)} .newsBox ul li .div6 a:hover .tit{background:rgba(0,135,197,0.9)} .newsBox ul li .div1 a:focus .tit{background:rgba(2,88,76,0.85);} .newsBox ul li .div2 a:focus .tit{background:rgba(0,105,154,0.9)} .newsBox ul li .div3 a:focus .tit{background:rgba(205,83,13,0.9)} .newsBox ul li .div4 a:focus .tit{background:rgba(205,83,13,0.9)} .newsBox ul li .div5 a:focus .tit{background:rgba(0,105,154,0.9)} .newsBox ul li .div6 a:focus .tit{background:rgba(0,135,197,0.9)} .newsBox ul li.no_img a .tit{height:100%;font-size:22px;line-height:30px;white-space:normal} .newsBox ul li.no_img .div1 a .tit{background:rgba(26,168,148,0.8);} .newsBox ul li.no_img .div2 a .tit{background:rgba(0,135,197,0.9)} .newsBox ul li.no_img .div3 a .tit{background:rgba(195,77,10,0.9)} .newsBox ul li.no_img .div4 a .tit{background:rgba(0,135,197,0.9)} .newsBox ul li.no_img .div5 a .tit{background:rgba(26,168,148,0.8);} .newsBox ul li.no_img .div6 a .tit{background:rgba(195,77,10,0.9)} #section3 .btnMore{clear:both;padding-top:30px;text-align:center} #section3 .btnMore a{display:inline-block;padding:10px 0;width:178px;font-size:16px;color:#3162a8;border:2px solid #5381ba;transition: all 0.2s;} #section3 .btnMore a:hover{color:#fff;background:rgba(81,127,184,0.6)} @media all and (max-width: 970px) { .floor3 { padding:40px 0 20px 0; } .floor3:after { display:block; clear:both; content:''; } .floor3 .snsArea { display:none; } .newsBox { width:98%; background:#f3f3f3;box-sizing: border-box; } .newsBox ul li { width:31%;} .newsBox ul li .tit { width:90%; } } @media all and (max-width: 640px) { .newsBox ul li { width:47%;} } @media all and (max-width: 517px) { .newsBox ul li { width:45%;} .newsBox ul li .tit { width:84%; } } @media all and (max-width: 350px) { .newsBox ul li { width:97%;} .newsBox ul li .tit { width:91%; } } /* floor4 */ .floor4 { position:relative; z-index:10; width:1200px; margin:0 auto; } .fq_box { position:relative; float:left; width:398px; height:290px; border-left:1px solid rgba(255, 255, 255, 0.2); } .floor4 .corporation { border-right:1px solid rgba(255, 255, 255, 0.2); } .fq_box h3 { font-weight:normal; font-size:23px; padding:31px 0; text-align:center; color:#fff; letter-spacing:-1px; } .fq_box ul { width:100%; margin:20px 40px; } .fq_box li { float:left; width:40%; } .fq_box li:nth-child(even) { width:60%; } .fq_box li a {max-width: 180px;width:100%;display:block;padding-left:8px;line-height:2;color:#fff;background:url(/images/portal/common/li_dot.gif) no-repeat left 15px;} .citizen h3 { background:#1a9da9 url(/images/portal/main/foot_ico_1.png) no-repeat 100px 13px; padding-left:60px } .tour h3 { background:#0e9ed6 url(/images/portal/main/foot_ico_2.png) no-repeat 100px 13px; padding-left:60px; } .corporation h3 { background:#33569a url(/images/portal/main/foot_ico_3.png) no-repeat 100px 13px; padding-left:60px; } #footer { } .ir {display:block;overflow:hidden;float:left;margin:0;padding:0;color:transparent;text-indent:-9999em} .img_comn {background-image:url(/images/portal/common/img_comn.png);background-repeat:no-repeat} .inner { position:relative; z-index:10; width:1200px; margin:0 auto; } /* foot_banner */ #foot_banner {overflow:hidden;position:relative; height:75px; width:1200px; margin:10px auto; } #foot_banner h3 { position:absolute; top:27px; left:0px; } #foot_banner .fb_box {position:absolute; width:1100px; height:44px;margin:15px 0 0 145px;;overflow:hidden} #slider_foot_banner {position:absolute; width:1080px ; } #slider_foot_banner li {float:left;} #foot_banner .control {position:absolute;top:27px;left:70px;width:60px;} #foot_banner .control button, #foot_banner .control a {position:absolute;width:24px;height:24px} #foot_banner .control .btn_prev {top:0;left:0;background-position:0 -146px} #foot_banner .control .btn_prev:hover, #foot_banner .control .btn_prev:active, #foot_banner .control .btn_prev:focus {background-position:0 -176px;z-index:1} #foot_banner .control .btn_next {top:0;left:23px;background-position:0 -206px} #foot_banner .control .btn_next:hover, #foot_banner .control .btn_next:active, #foot_banner .control .btn_next:focus {background-position:0 -236px;z-index:1} #foot_banner .control .btn_more {top:0px;left:46px;background-position:0 -266px} #foot_banner .control .btn_more:hover, #foot_banner .control .btn_more:active, #foot_banner .control .btn_more:focus {background-position:0 -296px;z-index:1} #foot_banner .control .btn_stop {top:0px;left:69px;background-position:0 -326px} #foot_banner .control .btn_stop:hover, #foot_banner .control .btn_stop:active, #foot_banner .control .btn_stop:focus {background-position:0 -356px;z-index:1} #foot_banner .control .btn_play {display:none;top:0px;left:69px;background-position:0 -386px} #foot_banner .control .btn_play:hover, #foot_banner .control .btn_play:active, #foot_banner .control .btn_play:focus {background-position:0 -416px;z-index:1} /* foot_menus */ #foot_menus {position:relative;height:48px;border:1px solid #dbdbdb; border-width:1px 0; background:#ebebeb;z-index:999} .foot_menus > li {float:left;position:relative;width:298px} .foot_menus > li > button {position:relative;display:block;width:100%;height:48px;padding-left:30px;border-right:1px solid #dbdbdb;background-position:260px 20px;text-align:left;line-height:48px;text-decoration:none} .foot_menus > li:first-child > button {border-left:1px solid #dbdbdb;} .foot_menus > li.active > button {background-position:260px -34px} .foot_menus div {display:none;position:absolute;left:-1px;right:0;padding-bottom:1px;border:1px solid #cfcfcf;border-bottom:0;background:#fff;} .foot_menus .fm_1 {top: -233px;height: 218px;padding-top:12px;} .foot_menus .fm_2 {top: -285px;height: 270px;left: 0;padding-top:12px;} .foot_menus .fm_3 {top: -330px;height: 300px;padding-top:27px;} .foot_menus .fm_4 {top: -133px;height: 109px;padding-top:21px;} .foot_menus ul .col2 {float:left;width:48%} .foot_menus ul .clear {clear:both} .foot_menus ul li a {display:block;padding-left:23px;background-position:30px -599px;line-height:2} .foot_menus ul li a:hover, .foot_menus ul li a:active, .foot_menus ul li a:focus {color:#22aeb3} .foot_menus .close {position:absolute;top:-1px;right:-1px;width:30px;height:30px;background-color:#37383a;background-position:50% -105px; } .foot_menus .close:hover, .foot_menus .close:active, .foot_menus .close:focus {background-color:#36bfc4} .footer_navi{margin-bottom:5px;} .footer_navi a:first-child{background:none; margin-left:0; padding-left:0;} .footer_navi a{margin:0 0 0 3px;padding:0 0 0 15px;background:url(/images/portal/common/foot_bar.png) no-repeat; color:#555; letter-spacing:-0.5px;} /*qrcode*/ .qrcode { float: right; } .qrcode a { margin:0 3px; } #foot_info { padding:26px 0 40px; } #foot_info .inner {position:relative} .foot_logo { height:82px;margin:14px 35px 30px 0px; float:left;} #foot_info p, .copyright { font-size:12px; font-weight:normal; color:#888; } @media only screen and (max-width:970px) { #container { height:auto;} .floor1, .floor2, .floor3, .floor4, #foot_banner, .inner { width:100%; } .floor1 .main_search { width:100%; position:relative; top:0; left:auto; background:#4066ad; } .floor1 .main_search .msearch input{width:86% !important;} .floor1 .weather { display:none; } .floor1 .symbol { display:none; } .floor4 .citizen { background:#299ea9; } .floor4 .tour { background:#109ad0; } .floor4 .corporation { background:#304e88; } .fq_box { width:100%;border: none !important; } .fq_box .tour, .fq_box .corporation { background:#51596c; } #foot_banner { display:none; } #foot_menus { clear:both; border:0px solid #dbdbdb; border-width:0; height:100%;} #foot_menus .foot_menus > li { float:none; width:100%; border-bottom:1px solid #dbdbdb; background:#ebebeb; } #foot_menus .foot_menus > li > button { border-right:0px solid #dbdbdb; background-position:95% 20px; } #foot_menus .foot_menus > li:first-child > button { border-left:0px solid #dbdbdb; } #foot_info { padding:20px; } .fq_box ul{ width:90%; margin: 20px 5%; } } .ifBox{width:90%; padding:0 5%; overflow:hidden;} .ifBox iframe body{overflow:hidden;} #coro .cB::after {clear:both; content:''; display:block;} #coro {position:absolute; top:30px; left:50%; margin-left:-400px; width:800px; box-sizing:border-box; z-index:999; background:#fff; border:5px solid #254d78; display:none;} #coro .coro_head {padding:20px 20px 20px 60px; background:#254d78 url(http://www.dongnae.go.kr/images/portal/main/coro_01.png) no-repeat 10px 10px; position:relative;} #coro .coro_head_title {color:#fff; font-size:24px; font-weight:600;} #coro .coro_head a.close {position:absolute; top:10px; right:10px; background:url(http://www.dongnae.go.kr/images/portal/main/coro_02.png) no-repeat 50% 50%; width:39px; height:39px; text-indent:-9999px;} #coro .coro_con {padding:30px;} #coro .coro_con p.con01_title {background:#ffd900; color:#000; padding:15px 20px; text-align:center; font-size:20px;margin-bottom:20px;} #coro .coro_con p.con01_title span {font-weight:600;} #coro .con01_box {padding:5px; position:relative; box-sizing:border-box; background:#f2f2f2; margin-bottom:30px;} #coro .con01_box > div {background:#fff; padding:15px; position:relative;} #coro .con01_box::before {content:''; display:block; width:18px; height:5px; background:#cc0000; position:absolute; top:0; left:0;} #coro .con01_box::after {content:''; display:block; width:5px; height:18px; background:#cc0000; position:absolute; top:0; left:0;} #coro .con01_box > div > p {float:left; width:50%; text-align:center; box-sizing:border-box;} #coro .con01_box > div > p img { padding-top:15px;} #coro .con01_box > div > div {float:left; width:50%; box-sizing:border-box; padding:30px 0px 30px 150px; background:url(http://www.dongnae.go.kr/images/portal/main/coro_03.png) no-repeat 60px 50%; border-left:1px solid #dedede;} #coro .con01_box > div > div p {font-size:20px; color:#333; font-weight:500;} #coro .con01_box > div > div p span {color:#b23033; display:block;} #coro .con02_title {position:relative;} #coro .con02_title p:first-child {font-size:18px; color:#333;background:url(http://www.dongnae.go.kr/images/portal/main/coro_05.png) no-repeat 0px 50%; font-weight:600; padding:10px 10px 10px 50px;} #coro .con02_title p:nth-child(2) {position:absolute; top:10px; right:0;} #coro .con02_box {padding:20px; background:#3b58a4; margin-bottom:30px;} #coro .con02_box dl {float:left; width:40%; text-align:center; color:#fff; border:1px solid rgba(255,255,255,0.5); padding:10px; box-sizing:border-box;} #coro .con02_box dl dt {font-weight:bold; font-size:22px; border-radius:5px; color:#0c2c81; background:#fec2c2; display:inline-block; width:150px; padding:10px;} #coro .con02_box dl dd {font-size:60px; font-weight:600; margin:30px 0px;} #coro .con02_box div {float:right; width:50%;} #coro .con02_box div p {} #coro .con02_box div p.count {position:relative; font-size:22px; color:#fff; margin-bottom:20px;margin-top:15px;} #coro .con02_box div p.count span:nth-child(1) {display:inline-block; width:60%; } #coro .con02_box div p.count span:nth-child(2) {display:inline-block; width:40%; text-align:right; color:#e6e86e; text-align:right;} #coro .con02_box div p.cop {padding:1px; border-top:1px solid rgba(255,255,255,0.5); border-bottom:1px solid rgba(255,255,255,0.5); font-size:16px; color:#fff; text-align:center; padding:10px 0px;} #coro .con02_box .tbl {margin-top:10px; margin-bottom:20px; font-size:20px; width:100%; border-collapse: separate; border-spacing: 2px;} #coro .con02_box .tbl th {text-align:center; } #coro .con02_box .tbl td, .tbl th {padding:20px 10px; text-align: center; line-height:20px; vertical-align: middle; box-sizing: border-box; word-break: break-all;} #coro .con02_box .tbl thead th {border-bottom:none; background:#003062; color:#00ccff;} #coro .con02_box .tbl tbody th {background:#003399; font-weight: normal; } #coro .con02_box.tbl tbody td {padding:35px 0px 30px 0px; color:#333; font-weight: 700; } #coro .con02_box .tbl tbody td span{font-size:50px; color:#000;} #coro .con02_box .tbl tfoot th {background:#f4f5f4; color:#555;} #coro .con02_box .tbl td {background: #fff;} #coro .con02_box .tbl td > ul{margin-top:0;} #coro .con02_box .tbl td.b_bg {background: #f4f8fc;} @media only screen and (max-width: 800px){ #coro .con02_box .tbl thead th {font-size:18px;} #coro .con02_box .tbl tbody td span{font-size:30px; color:#000;} } #coro .con03_box {background:#f1f5fc; padding:30px; border:1px solid #dadee6; margin-bottom:30px;} #coro .con03_box p.con03_title {font-size:30px; padding:15px 10px 15px 60px; background:url(http://www.dongnae.go.kr/images/portal/main/coro_06.png) no-repeat 0px 50%; color:#3e5eb4; font-weight:600;} #coro .con03_box ul {margin-top:20px; margin-bottom:20px;} #coro .con03_box ul li {margin-bottom:5px; padding-left:10px; position:relative;} #coro .con03_box ul li::before {content:''; display:block; width:3px; height:3px; background:#3e5eb4; top:10px; left:0px; position:absolute; } #coro .con04_box {padding:30px 30px 20px 120px; border:1px solid #dadee6; background:#f1f5fc url(http://www.dongnae.go.kr/images/portal/main/coro_07.png) no-repeat 20px 50%;} #coro .con04_box a {font-size:24px; display:block; font-weight:500; position:relative; padding-left:15px;} #coro .con04_box a {color:#333; margin-bottom:10px;} #coro .con04_box a::before {content:''; display:inline-block; width:8px; height:8px; border-radius:50%; background:#333; position:absolute; top:7px; left:0;} #coro .con04_box a:nth-child(1) {color:#cc0000; } #coro .con04_box a:nth-child(1)::before {background:#cc0000;} #coro .coro_foot {text-align:right; padding:5px 30px 15px 30px;} #coro .coro_foot a.btn_close {border-radius:3px; color:#fff; background:#333; padding:5px 10px;} @media only screen and (max-width:800px) { #coro {top:30px; left:0; margin-left:0px; width:auto;} #coro .coro_head_title {font-size:18px;} #coro .coro_con {padding:10px;} #coro .con01_box > div > p {float:none; width:100%;} #coro .con01_box > div > p img {padding-top:0;} #coro .con01_box > div > div {float:none; width:100%; padding:20px 0 0px 0; text-align:center; background:none; border-left:0; border-top:1px solid #dedede;} #coro .con02_title p:nth-child(2) {position:relative; top:0; right:auto; text-align:center; background:#051d5c; color:#fff; font-size:16px; padding:10px;} #coro .con02_box {padding:10px;} #coro .con02_box dl {float:none; width:100%;} #coro .con02_box div {float:none; width:100%;} }