@charset "utf-8"; /*================= 모바일 및 기본 세팅 ===================*/ .container{ width:100%; margin:0 auto} html.open,body.open{ overflow:hidden} /*주요홈페이지*/ #header .go_site{ display:none;} #header .top_left_menu{ position:absolute; top:80px; left:-200%; width:270px; text-align:center; z-index:2000 } #header .top_left_menu.open{position:fixed; left:0; transition:0.3s} #header .top_left_menu li{ display:inline-block; width:45%; font-size:14px;} #header .top_left_menu li a{ display:block; border:#8d8d8d solid 1px; padding:10px 0; background:#fff; color:#1b1b1b} #header .logo{ padding:25px 0px; text-align:center; line-height:0} #header .logo img{ width:50%;} #header .mobile_menu{ display:block; position:absolute; top:15px; left:15px; background:#fff; width:45px; height:45px; transition:0.3s;} #header .mobile_menu:before{ display:block; content:""; position:absolute; top:14px; left:12px; width:20px; height:3px; background:#2c2c2c; } #header .mobile_menu:after{ display:block; content:""; position:absolute; top:26px; left:12px; width:20px; height:3px; background:#2c2c2c; } #header .mobile_menu span{ display:block; position:absolute; top:50%; left:12px; text-indent:-9999px; width:20px; height:3px;background:#2c2c2c; margin-top:-2px;} #header .mobile_menu.open{position:fixed; top:15px; left:210px; border:#d0d0d0 solid 1px; transition:0.3s; z-index:1500} #header .mobile_menu.open:before{ top:20px; transform:rotate(45deg); transition:0.3s} #header .mobile_menu.open:after{ top:20px; transform:rotate(-45deg); transition:0.3s} #header .mobile_menu.open span{ display:none} #header .etc_btn{} #header .etc_btn .all_menu{ display:none} #header #all_menu_wrap{ display:none; } #header .etc_btn .all_search{ position:absolute; right:15px; top:25px; display:block; width:21px; height:21px; background:url(/home/sonbul/images/common/icon_search.png) left center no-repeat; background-size:21px; text-indent:-9999px } #header .town_select{ display:none; } #header .gnb_wrap{ position:absolute; top:0; left:-200%; width:270px; padding-top:130px; background:#f1f1f1 url(/home/sonbul/images/common/logo.png) 10px 15px no-repeat; background-size:55%; transition:0.3s; z-index:1000 } #header .gnb_wrap.open{ position:fixed; left:0; transition:0.3s} #header .gnb_wrap.open .gnb{ overflow:auto; } #header .gnb_wrap > .gnb{ padding-bottom:25px;} #header .gnb_wrap > .gnb > li { position:relative; font-size:16px; } #header .gnb_wrap > .gnb > li:before{ position:absolute; right:19px; top:25px; margin-top:-9px; display:block; content:""; width:2px; height:18px; background:#868686; transition:0.3s } #header .gnb_wrap > .gnb > li:after{ position:absolute; right:11px; top:26px; margin-top:-2px; display:block; content:""; width:18px; height:2px; background:#868686; transition:0.5s } #header .gnb_wrap > .gnb > li.open:before{ top:40px; opacity:0; } #header .gnb_wrap > .gnb > li.open:after{ position:absolute; right:11px; top:26px; margin-top:-2px; display:block; content:""; width:18px; height:2px; background:#008044; transition:0.5s } #header .gnb_wrap > .gnb > li.open > a{ color:#fff900; } #header .gnb_wrap > .gnb > li > a{ display:block; padding:18px 15px 18px 18px; background:#fff; border-bottom:#d7d7d7 solid 1px;} #header .gnb_wrap > .gnb > li > ul{ display:none; background:#f8f8f8; border-bottom:#d7d7d7 solid 1px; } #header .gnb_wrap > .gnb > li > ul > li{ position:relative;} #header .gnb_wrap > .gnb > li > ul > li > a{ display:block; font-size:14px; font-weight:300; color:#5c5c5c; padding:15px; border:0; border-bottom:#d7d7d7 solid 1px;} #header .gnb_wrap > .gnb > li > ul > li > a:hover{ font-weight:500 } #header .gnb_wrap > .gnb > li > ul > li:last-child > a{ border-bottom:0; } #header .drawer{ position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.6); visibility:hidden; z-index:900} #header .drawer.open{ left:0; visibility:visible; transition:0.3s } #total_search{ display:block; clear:both; background:#2f724b; padding:0; height:0px; overflow:hidden; transition:0.3s} #total_search.open{ padding:25px 10px; height:150px; transition:0.3s } #total_search:after{ display:block; content:""; clear:both} #total_search h2{ display:none; } #total_search h2 em{ display:block; font-weight:700; font-style:normal} #total_search form{ float:left; position:relative; width:100%; margin-left:0;} #total_search form fieldset:after{ display:block; content:""; position:absolute; right:70px; top:6px; width:1px; height:26px; background:#ccc} #total_search form #search_field{ border:0; width:100%; height:40px; border-radius:10px; padding:0 15px; font-size:14px;} #total_search form #search_btn{ position:absolute; right:0; top:0; width:60px; height:40px; padding-left:20px; padding-bottom:5px; } #total_search form #search_btn{ background:#fff url(/home/sonbul/images/common/icon_search_b.png) 2px center no-repeat; background-size:20px; border:0; border-radius:20px; font-size:14px; cursor:pointer } #total_search .latest_word{ padding:15px 0; } #total_search .latest_word a{ color:#fff; padding:0 5px; font-size:12px} #total_search #search_close{ display:block; clear:both; width:85px; height:40px; margin:0 auto; line-height:40px; color:#fff; font-size:14px; padding-left:40px; border-radius:10px 10px 0 0; } #total_search #search_close{ background:#215034 url(/home/sonbul/images/common/icon_close.png) 20px center no-repeat; background-size:15px; } #main_con_wrap{} #main_con_wrap .introduce{} #main_con_wrap .introduce .img_wrap{ position:relative } #main_con_wrap .introduce .img_wrap img{ width:100%;} #main_con_wrap .introduce .img_wrap span{ display:block; position:absolute; bottom:0; width:100%; padding:15px; color:#fff; background:rgba(0,0,0,.7); } #main_con_wrap .introduce .exp_box{ background:#28337c; color:#fff; padding:15px; } #main_con_wrap .introduce .exp_box:after{ clear:both; display:block; content:""} #main_con_wrap .introduce .exp_box .sub_title{ margin:10px 0; font-size:14px; font-weight:500;} #main_con_wrap .introduce .exp_box p{ font-size:12px; line-height:120%} #main_con_wrap .introduce .exp_box .more{ display:block; float:right; width:35px; height:35px; background:url(/home/sonbul/images/main/more.png) no-repeat; margin-top:15px; text-indent:-9999px} #main_con_wrap .work_time{ padding:15px; } #main_con_wrap .work_time span{ display:inline-block; margin:5px 0; font-weight:700;} #main_con_wrap .work_time span em{ font-style:normal} #main_con_wrap .work_time span.phone{ display:block; color:#485ee2; font-size:28px; margin:0 0 10px 0} #main_con_wrap .work_time span.time_title{ display:block; } #main_con_wrap .work_time span.time01{ color:#ff4800; } #main_con_wrap .work_time span.time01 em{ color:#000} #main_con_wrap .latest_wrap{ } #main_con_wrap .latest_wrap .latest_box{ position:relative; padding:15px;} #main_con_wrap .latest_wrap .latest_box .first_line{ padding:10px 0; margin-bottom:10px; border-bottom:#4285f6 dashed 1px;} #main_con_wrap .latest_wrap .latest_box .first_line .title{ display:block; float:left; color:#000; font-size:14px; font-weight:bold; line-height:140% } #main_con_wrap .latest_wrap .latest_box .first_line .title img{ vertical-align:bottom;} #main_con_wrap .latest_wrap .latest_box .first_line .date{ display:block; float:right; font-size:14px; line-height:130%} #main_con_wrap .latest_wrap .latest_box .first_line p{ clear:both; font-size:12px; padding:10px 0 0; width:100%; text-overflow:ellipsis; white-space:nowrap; overflow:hidden } #main_con_wrap .latest_wrap .latest_box ul li{ font-size:12px; margin:5px 0; overflow:hidden;} #main_con_wrap .latest_wrap .latest_box ul li a{ float:left; width:75%; text-overflow:ellipsis; white-space:nowrap; overflow:hidden} #main_con_wrap .latest_wrap .latest_box ul li span{ float:right; } #main_con_wrap .latest_wrap .latest_box a.more{ position:absolute; right:15px; top:15px; display:block; width:17px; height:17px; } #main_con_wrap .latest_wrap .latest_box a.open{ display:none; } #main_con_wrap .latest_wrap .latest_box a.more img{ width:100% } #main_con_wrap .latest_wrap .latest_box.left_box{ background:#5f71e2; } #main_con_wrap .latest_wrap .latest_box.left_box h3{ color:#fff;} #main_con_wrap .latest_wrap .latest_box.left_box .title{ color:#fff;} #main_con_wrap .latest_wrap .latest_box.left_box .first_line{ border-bottom:#fff dashed 1px;} #main_con_wrap .latest_wrap .latest_box.left_box .first_line a{ color:#fff !important} #main_con_wrap .latest_wrap .latest_box.left_box ul li a{ color:#fff !important} #main_con_wrap .latest_wrap .latest_box.left_box ul li span{ color:#fff !important} #main_con_wrap .quick_menu a{ display:block; float:left; width:33.333%; padding:15px 0; text-align:center} #main_con_wrap .quick_menu a span{ display:block;} .breadcrumb_wrap{ display:none; position:relative; height:42px; border-bottom:#d0d0d0 solid 1px;} .breadcrumb_wrap .container{ position:relative; overflow-x:auto; overflow-y:hidden;} .breadcrumb_wrap .skip_block{ display:block; content:''; clear:both; width:80px; height:41px; position:absolute; right:0; top:0; background:linear-gradient(to right, rgba(255,255,255,0), #fff); transition:0.3s} .breadcrumb_wrap .skip_block.open{ position:fixed; top:225px; transition:0.3s} .breadcrumb{ position:relative; } .breadcrumb > li{ position:relative; float:left; font-size:14px; font-weight:500; padding:0 10px; letter-spacing:-0.05em } .breadcrumb > li.active:after{ position:absolute; display:block; content:""; background:#00ab4e; left:0; bottom:0; width:100%; height:4px;} .breadcrumb > li > a{ display:block; padding:13px 0; } .breadcrumb > li > ul{ display:none; position:absolute; width:100%; background:#fff; border:#d0d0d0 solid 1px; padding:20px 15px;} .breadcrumb > li > ul > li{ } .breadcrumb > li > ul > li > a{ display:block; padding:5px 0; width:100%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap} .left_menu{ display:none} #content_area .content_wrap .content{ min-height:500px;} .content_wrap .content_top{ padding-top:10px; padding-bottom:10px; border-bottom:#c6c6c6 solid 1px } .content_wrap .content_top:after{ display:block; content:""; clear:both} .content_wrap .content_top h3{ float:left; font-size:18px; width:80%; padding-top:11px; padding-left:10px} .content_wrap .content_top .share_list{ float:right; } .content_wrap .content_top .share_list li{ position:relative; line-height:0;} .content_wrap .content_top .share_list > li:first-child{ width:50px; transition:0.5s} .content_wrap .content_top .share_list > li:last-child{ display:none } .content_wrap .content_top .share_list li a{ display:block; width:40px;} .content_wrap .content_top .share_list li a img{ width:100%;} .content_wrap .content_top .share_list li.open{ height:40px; transition:0.5s} .content_wrap .content_top .share_list li ul{ width:40px; position:absolute; top:42px; left:0; visibility:hidden; overflow:hidden} .content_wrap .content_top .share_list li ul.open{visibility:visible; } .content_wrap .content{ padding:10px; } .satisfaction_wrap > div{ border:#d1d1d1 solid 1px; } .satisfaction{ width:100%; padding:15px; background:#f9f9f9} .satisfaction h5{ font-size:14px; font-weight:500; padding:0 0 10px 50px; height:50px; color:#6f6f6f; line-height:120%} .satisfaction h5:before{ display:none } .satisfaction form#satisfy{ padding:0 0 5px 0; background:url(/home/sonbul/images/sub/icon_speech.png) left top no-repeat; background-size:40px; border-bottom:#d0d0d0 solid 1px} .satisfaction form#satisfy .satisfy_list{ float:left} .satisfaction form#satisfy .satisfy_list li{ float:left; line-height:150%;} .satisfaction form#satisfy input[type='radio']{margin-right:0; margin-top:0; width:17px; height:17px; vertical-align:0px; opacity:0; position:absolute; cursor:pointer} .satisfaction form#satisfy input[type='radio'] + label { background:url(/home/sonbul/images/sub/radio_off.png) left center no-repeat; width:17px; height:17px; font-size:14px; font-weight:500; padding-left:22px; color:#707070; cursor:pointer; margin-right:5px;} .satisfaction form#satisfy input[type='radio']:checked + label{ background:url(/home/sonbul/images/sub/radio_on.png) left center no-repeat; } .satisfaction form#satisfy input[type='radio']:focus + label{ background:url(/home/sonbul/images/sub/radio_on.png) left center no-repeat; border:#999 dashed 1px } .satisfaction form#satisfy label{ line-height:18px;} .satisfaction form#satisfy .write_wrap{ margin-bottom:20px; } .satisfaction form#satisfy .write_wrap #stsfdgCn{ width:80%; border:#898989 solid 1px; height:30px; line-height:30px; margin-top:10px; padding:0 10px} .satisfaction form#satisfy .write_wrap #stsfdgSubmit { width:20%; border:#272727 solid 1px; background:#656565; font-size:12px; color:#fff; height:30px; vertical-align:top; margin-top:10px; cursor:pointer; margin-left:-4px } .satisfaction .charger{ font-size:14px; line-height:160%; padding-top:10px; overflow:hidden} .satisfaction .charger dl:after{ display:block; content:""; clear:both} .satisfaction .charger dl dt,.satisfaction .charger dl dd{ float:left; font-size:12px; margin-right:0;} .satisfaction .charger dl dt{ width:30%; margin-right:10px; font-weight:bold;} .satisfaction .charger dl dd{ width:60%; margin-right:0; color:#858585} .satisfaction .charger .btn_error{ clear:both; display:block; font-size:12px; font-weight:bold; margin-top:10px; padding: 5px 5px 5px 35px; background:#eee url(/home/sonbul/images/sub/icon_write.png) 10px center no-repeat } #relative_site_area{ background:#e8e8e8; border-top:#525252 solid 1px; clear:both} #relative_site_area:after{ display:block; content:""; clear:both} #relative_site_area .relative_list{ margin-top:-1px} #relative_site_area .relative_list > li{ float:left; position:relative; width:33.333%; } #relative_site_area .relative_list > li > a{ display:block; padding:15px 0 15px 10px; font-size:12px; color:#fff; font-weight:500; background:#525252 url(/home/sonbul/images/main/arrow_up.png) 90% center no-repeat; background-size:10px; border:#272727 solid 1px} #relative_site_area .relative_list > li > a:hover{ background-position:90% 40%; transition:0.3s } #relative_site_area .relative_list > li.admin_info{ display:none} #relative_site_area .relative_list > li.family_site > a{ background-color:#3776b7; border:#104a86 solid 1px } #relative_site_area .relative_list > li.relative_site > a{ background-color:#239b6f; border:#0f6545 solid 1px } #relative_site_area .relative_list > li.minwon_info{ display:none} #relative_site_area .relative_list > li > ul{ display:none; position:absolute; bottom:44px; background:#f6f6f6; width:100%; padding:5px; max-height:250px;border:#272727 solid 1px; overflow-y:auto} #relative_site_area .relative_list > li:hover > ul{ display:block} #relative_site_area .relative_list > li > ul > li{ } #relative_site_area .relative_list > li > ul > li > a{ display:block; padding:5px; color:#6f6f6f; font-size:12px; font-weight:500; width:100%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap} #relative_site_area .relative_list > li > ul > li > a:hover{ color:#fff; background:#525252} #bottom{ clear:both; padding:15px 15px 50px; border-top:#ccc solid 1px;} #bottom .logo{ text-align:center;} #bottom .bottom_menu{ margin-top:10px; margin-bottom:15px; text-align:center} #bottom .bottom_menu a{ display:inline-block; padding:0 5px; margin:5px 0; border-right:#c7c7c7 solid 1px; color:#545454; font-size:12px; font-weight:bold} #bottom .bottom_menu a.privacy { color: #1b75bc; font-weight: bold;} #bottom .bottom_menu a:first-child { padding-left:0;} #bottom .bottom_menu a:last-child{ border:0 } #bottom p{ color:#737272; font-size:12px; font-weight:bold; margin-top:5px; text-align:center} #bottom #go_top{ position:fixed; right:15px; bottom:15px; width:40px; margin:0; z-index:3000 } #bottom #go_top img{ width:100%; } /*================== 스마트폰 기본 세팅 ==================*/ /*smartphones ( portrait )*/ @media all and (min-width:375px) { } @media all and (min-width:425px) { } /*smartphones ( landscape )*/ @media all and (min-width:321px) and (max-width:360px) { } /*smartphones ( landscape )*/ @media all and (min-width:361px) and (max-width:375px) { } /*smartphones ( landscape )*/ @media all and (min-width:376px) and (max-width:414px) { } /*smartphones ( landscape )*/ @media all and (min-width:415px) and (max-width:480px) { } /*tablet( portrait )*/ @media all and (min-width:640px) { } @media all and (min-width:641px) and (max-width:767px) { } /*tablet ( portrait )*/ @media all and (min-width:768px) and (max-width:1023px) { #header .logo { padding:20px 0} #header .logo img{ width:auto;} #main_con_wrap .introduce{ background:#28337c} #main_con_wrap .introduce:after{ display:block; content:""; clear:both} #main_con_wrap .introduce .img_wrap{ float:left; width:60%} #main_con_wrap .introduce .exp_box{ float:left; width:40%;} #main_con_wrap .work_time{ background:#f1f1f1; text-align:center} #main_con_wrap .work_time span{ display:inline-block !important; margin:5px 0; vertical-align:middle} #main_con_wrap .work_time span.phone{ margin:0 25px 0 0; } #main_con_wrap .latest_wrap .latest_box{ float:left; width:50%;} #main_con_wrap .quick_menu{ background:#f1f1f1;} } /*================= 데스크탑 기본 세팅 ===================*/ @media all and (min-width:1024px) { .container{ width:1000px; margin:0 auto} #header .container{ transition:0.2s } #header .zoom_inout{ float:left; } #header .zoom_inout a{ float:left; font-size:12px; background:#fff; padding:10px; border:#b9b9b9 solid 1px; } #header .zoom_inout .zoom{ display:block; width:34px; height:34px; border-left:0; background-image:url(/home/sonbul/images/common/zoom_inout.png); background-repeat:no-repeat; font-size:0; text-indent:-9999px } #header .zoom_inout a.normal{ background-position:-35px -34px; } #header .zoom_inout a.normal:hover{ background-position:-35px -1px} #header .zoom_inout a.bigger{ background-position:-69px -34px ; } #header .zoom_inout a.bigger:hover{ background-position:-69px 0} #header .zoom_inout a.smaller{ background-position:0 -34px ; } #header .zoom_inout a.smaller:hover{ background-position:0 0} #header .go_site{ display:block; background:#f0f0f0; padding:0; height:34px; text-align:right; transition:0.3s} #header .go_site.open{ height:130px; transition:0.3s;} #header .go_site .btn_go_site{ display:inline-block; width:200px; margin:0 auto; text-align:center; background:#fff url(/home/sonbul/images/common/arrow_open.jpg) 15px center no-repeat; padding:10px 10px 10px 35px; border:#b9b9b9 solid 1px; font-size:12px;} #header .go_site.open .btn_go_site{ display:none } #header .go_site .container{ width:1024px;} #header .total_site{ display:block; position:absolute; top:-274px; left:0; width:100%; height:0px; font-size:0; padding-top:0; padding-bottom:0; background:#f0f0f0; text-align:left; transition:0.3s; overflow:hidden; z-index:110} #header .total_site.open{ top:0; height:130px ;padding-top:17px; padding-bottom:20px; transition:0.3s; } #header .total_site .container{ position:relative} #header .total_site h2{ display:inline-block; background:url(/home/sonbul/images/common/icon_title.png) no-repeat; padding-left:45px; margin-top:30px; font-size:14px; width:130px;} #header .total_site h2{ font-weight:bold; color:#747373; vertical-align:top;} #header .total_site a{ display:inline-block; width:9.5%; background:transparent; vertical-align:top;} #header .total_site a span{ display:block; line-height:100%;} #header .total_site a span.icon{ display:block; margin:0 auto; width:60px; height:62px; background-image:url(/home/sonbul/images/common/icon_site.png); } #header .total_site a span.icon{ background-repeat: no-repeat; background-position:0 0; line-height:normal; } #header .total_site a span.title{ font-size:12px; font-weight:bold; color:#747373; text-align:center; padding-top:12px; line-height:120%;} #header .total_site a span.title.new_win{ background:url(/home/sonbul/images/common/win_new.png) right 3px no-repeat} #header .total_site a span.title.none{ padding-top:7px;} #header .total_site a span.icon01{ background-position:0 0;} #header .total_site a span.icon02{ background-position:-60px 0;} #header .total_site a span.icon03{ background-position:-120px 0;} #header .total_site a span.icon04{ background-position:-180px 0;} #header .total_site a span.icon05{ background-position:-240px 0;} #header .total_site a span.icon06{ background-position:-300px 0;} #header .total_site a span.icon07{ background-position:-360px 0;} #header .total_site a span.icon08{ background-position:-420px 0;} #header .total_site a span.icon09{ background-position:-480px 0;} #header .total_site a span.icon10{ background-position:-540px 0;} #header .total_site a span.icon15{ background-position:-840px 0;} #header .total_site a.other_site{ float:right; margin-right:5%;} #header .total_site a.close_site{ position:absolute; right:0; width:55px; padding:5px 10px 5px 20px; } #header .total_site a.close_site{ border:#ccc solid 1px; background:#fff url(/home/sonbul/images/common/arrow_close.jpg) 5px center no-repeat ; font-size:12px; text-indent:0} #header .mobile_menu{ display:none; } #header .container{ position:relative; } #header .top_left_menu{ left:0; top:auto; float:left; width:auto; padding:30px 0;} #header .top_left_menu li{ float:left; width:auto; } #header .top_left_menu li a{ position:relative; display:block; font-size:12px; font-weight:bold; border:0; padding:14px; text-align:center; background:#d9d9d9; color:#787878} #header .top_left_menu li:first-child > a{ padding-left:50px;background-image:url(/home/sonbul/images/common/icon_top_off.png); background-repeat:no-repeat; background-position: 20px center;} #header .top_left_menu li:first-child > a:hover,#header .top_left_menu li:first-child > a.active{ background-color:#008f4c; color:#fff; background-image:url(/home/sonbul/images/common/icon_top_on.png); } /*기타버튼*/ #header .etc_btn{ display:block; position:absolute; right:130px; top:0; padding:20px 0; } #header .etc_btn a{ display:inline-block; padding:22px 0 22px 30px; margin-left:10px; font-size:14px; font-weight:500} #header .etc_btn a.all_menu{ background:url(/home/sonbul/images/common/icon_all.png) left center no-repeat } #header .etc_btn a.all_search{ background:url(/home/sonbul/images/common/icon_search.png) left center no-repeat; background-size:21px} #header .logo{ padding:30px 0} #header .logo img{ width:auto } #header .town_select{ display:block; position:absolute; right:0; top:30px; font-size:12px; z-index:2000} #header .town_select a{ display:block; background:#fff; border:#d9d9d9 solid 1px; height:40px; padding:0 15px; line-height:40px; font-weight:bold} #header .town_select a:hover{ background:#666; color:#fff;} #header .town_select > a { position:relative; padding-right:25px; } #header .town_select > a:after{ display:block; content:""; position:absolute; top:50%; right:10px; width:0px; height:0px; border:solid transparent; border-width:5px; border-top-color:#636363; margin-top:-2px;} #header .town_select > a:hover:after{ border-top-color:#fff;} #header .town_select ul{ display:none; position:absolute; width:100%; z-index:130} #header .gnb_wrap{ position:relative; left:0; background:#485ee2; padding:0; width:auto; border-top:#b9b9b9 solid 1px;} #header .gnb_wrap:after{ display:block; content:""; clear:both} #header .gnb_wrap > .gnb{ padding-bottom:0; } #header .gnb_wrap > .gnb > li { float:left; width:20%; position:relative; font-size:16px; } #header .gnb_wrap > .gnb > li:before,#header .gnb_wrap > .gnb > li:after{ display:none; transition:0.3s } #header .gnb_wrap > .gnb > li.open:before,#header .gnb_wrap > .gnb > li.open:after{ display:none; } #header .gnb_wrap > .gnb > li > a{ display:block; text-align:center; background:transparent; color:#fff; border:none } #header .gnb_wrap > .gnb > li > ul{ display:none; position:absolute; width:100%; /*padding:15px;*/ background:#f8f8f8;border: 1px solid #ccc;} #header .gnb_wrap > .gnb > li:hover ul{ display:block; } #header .gnb_wrap > .gnb > li > ul > li > a{ border-bottom:#d7d7d7 solid 1px; text-align:center; /*padding:10px; border:#fff solid 1px*/} #header .gnb_wrap > .gnb > li > ul > li > a:hover{ /*border:#a4a4a4 dashed 1px;*/ color:#424242; font-weight:bold} #header #all_menu_wrap{ display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(10,12,19,.9); overflow-y:scroll; padding:120px 0; z-index:9999} #header #all_menu_wrap .container{ position:relative } #header #all_menu_wrap .all_menu_top{ padding-bottom:39px; overflow:hidden} #header #all_menu_wrap .all_menu_top h2{ float:left; color:#fff; font-size:30px; background:url(/home/sonbul/images/main/icon_all_menu.png) left center no-repeat; padding-left:50px; } #header #all_menu_wrap #all_close{ position:absolute; top:0; right:0; color:#fff; display:inline-block; background:url(/home/sonbul/images/main/all_close.png) left center no-repeat; margin-top:10px; padding:5px 5px 5px 30px } #header #all_menu_wrap .go_sitemap{position:absolute; bottom:-50px; right:0; color:#fff; padding:15px 50px 15px 15px; border:#fff solid 1px; background:url(/home/sonbul/images/main/icon_go.png) 90% center no-repeat } #header #all_menu_wrap .all_depth2{ padding:43px 0 30px; border-top:#858689 solid 1px; overflow:hidden} #header #all_menu_wrap .all_depth2 .depth2_title{ float:left; width:170px; } #header #all_menu_wrap .all_depth2 .depth2_title h3{ font-size:24px; font-weight:500; color:#fff; margin-bottom:15px} #header #all_menu_wrap .all_depth2 .depth2_title img{ width:40%;} #header #all_menu_wrap .all_depth2 ul{ float:left; width:1030px; overflow: hidden} #header #all_menu_wrap .all_depth2 ul li{ float:left; width:24%; margin-right:1.33333%; margin-bottom:1.33333%;} #header #all_menu_wrap .all_depth2 ul li:nth-child(4n){ margin-right:0; } #header #all_menu_wrap .all_depth2 ul li a{ display:block; color:#fff; border:#858689 solid 1px; text-align:center; padding:15px 0;} #header #all_menu_wrap .all_depth2 ul li a:hover{ border:#aa463a solid 1px} #total_search h2{ display:block; float:left; color:#fff; font-size:25px; font-weight:300; height:65px; padding-left:80px; background:url(/home/sonbul/images/common/icon_sch_title.png) left top no-repeat; line-height:120%} #total_search form{ float:left; position:relative; width:860px; margin-left:30px;} #total_search form fieldset:after{ display:block; content:""; position:absolute; right:110px; top:10px; width:1px; height:40px; background:#ccc} #total_search form #search_field{ border:0; width:100%; height:60px; border-radius:20px; padding:0 25px; font-size:16px;} #total_search form #search_btn{ position:absolute; right:0; top:0; width:100px; height:58px; padding-left:20px; padding-bottom:5px; } #total_search form #search_btn{ background:#fff url(/home/sonbul/images/common/icon_search_b.png) 2px center no-repeat; border:0;border-radius:20px; font-size:18px; cursor:pointer } #total_search .latest_word{ padding:15px 0; } #total_search .latest_word a{ color:#fff; padding:0 10px; font-size:16px;} #total_search #search_close{ display:block; float:left; clear:none; width:115px; height:60px; line-height:60px; color:#fff; font-size:18px; padding-left:50px; border-radius:20px; margin-left:20px } #total_search #search_close{ background:#215034 url(/home/sonbul/images/common/icon_close.png) 20px center no-repeat } #main_con_wrap{ padding:20px 0; background:url(/home/sonbul/images/main/bg_main_con.jpg) center top no-repeat} #main_con_wrap:after{ display:block; content:""; clear:both} #main_con_wrap .introduce{ float:left; width:65%; background:#28337c; margin-bottom:25px} #main_con_wrap .introduce .exp_box .sub_title{ margin:10px 0; } #main_con_wrap .introduce .exp_box p{ font-size:12px; line-height:130%} #main_con_wrap .introduce .img_wrap{ float:left; width:64% } #main_con_wrap .introduce .exp_box{ float:right; width:36%; padding-top:30px; } #main_con_wrap .introduce .exp_box h3{ font-size:25px } #main_con_wrap .work_time{ float:right; width:33%; background:url(/home/sonbul/images/main/bg_time.jpg) left bottom no-repeat; padding-left:18%; padding-top:5%; min-height:317px } #main_con_wrap .work_time .phone em{ display:block } #main_con_wrap .latest_wrap{ float:left; width:65%;} #main_con_wrap .latest_wrap .latest_box{ width:75%; padding:30px; background:#fff; height:283px; transition:0.5s; overflow:hidden} #main_con_wrap .latest_wrap .latest_box .first_line{padding-top:30px; padding-bottom:15px; margin-bottom:15px; min-width:427px} #main_con_wrap .latest_wrap .latest_box .first_line .title{ font-size:18px; } #main_con_wrap .latest_wrap .latest_box .first_line p{ font-size:14px; padding-top:10px } #main_con_wrap .latest_wrap .latest_box ul{min-width:427px} #main_con_wrap .latest_wrap .latest_box ul li{ font-size:14px; margin:8px 0} #main_con_wrap .latest_wrap .latest_box a.more{ position:absolute; right:30px; top:30px; display:block; width:35px; height:35px; } #main_con_wrap .latest_wrap .latest_box a.open{ display:none; } #main_con_wrap .latest_wrap .latest_box a.open:before{ position:absolute; display:block; content:''; background:#000; width:25px; height:1px; right:0; bottom:15px; transform:rotate(40deg)} #main_con_wrap .latest_wrap .latest_box h3{ font-size:25px; } #main_con_wrap .latest_wrap .latest_box.left_box{ float:left; } #main_con_wrap .latest_wrap .latest_box.left_box.close:after{ display:none;} #main_con_wrap .latest_wrap .latest_box.left_box:after{display:block; right:0;top: 50%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute; pointer-events: none; border-right-color: #fff;border-width: 20px; margin-top: -20px;} #main_con_wrap .latest_wrap .latest_box.right_box.close:after{ display:none;} #main_con_wrap .latest_wrap .latest_box.right_box:after{ display:block; left:0;top: 50%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute; pointer-events: none; border-left-color: #5f71e2;border-width: 20px; margin-top: -20px;} #main_con_wrap .latest_wrap .latest_box.right_box{ float:left; } #main_con_wrap .latest_wrap .latest_box.close{ width:25% !important; transition:0.5s;} #main_con_wrap .latest_wrap .latest_box.close > div,#main_con_wrap .latest_wrap .latest_box.close > ul{ display:none} #main_con_wrap .latest_wrap .latest_box.close a.more{ display:none;} #main_con_wrap .latest_wrap .latest_box.close a.open{ display:block; position:absolute; bottom:30px; color:#fff; font-size:14px; padding:10px 30px 10px 0; border-bottom:#fff solid 1px;} #main_con_wrap .latest_wrap .latest_box.close a.open:before{ position:absolute; display:block; content:''; background:#fff; width:25px; height:1px; right:0; bottom:15px; transform:rotate(40deg)} #main_con_wrap .latest_wrap .latest_box.right_box.close a.open{ display:block;position:absolute; bottom:30px; color:#000; font-size:14px; padding:10px 0 10px 30px; border-bottom:#000 solid 1px;} #main_con_wrap .latest_wrap .latest_box.right_box.close a.open:before{ position:absolute; display:block; content:''; background:#000; width:25px; height:1px; left:0; right:auto; bottom:15px; transform:rotate(-40deg)} #main_con_wrap .quick_menu{ float:right; background:#fff; width:33%; min-height:283px} #main_con_wrap .quick_menu a{ width:50%; padding:30px 0;} #main_con_wrap .quick_menu a:first-child{ border-right:#f0f0f0 solid 1px} #main_con_wrap .quick_menu a:last-child{ width:100%; border-top:#f0f0f0 solid 1px} #content_area{ outline:0;} /*sub_area*/ .breadcrumb_wrap{ display:block; height:48px; border:0; margin-top:20px; } .breadcrumb_wrap .container{ overflow:visible} .breadcrumb_wrap .skip_block{ display:none} .breadcrumb_wrap .breadcrumb{ position:relative; float:left; background:#fff } .breadcrumb_wrap .breadcrumb:after{ position:absolute; right:-21px; display:block; content:""; width:21px; height:48px; } .breadcrumb_wrap .breadcrumb > li{ position:relative; float:left; font-size:14px; font-weight:500; padding:0; margin:0; } .breadcrumb_wrap .breadcrumb > li:after{ position:absolute; right:2px; top:50%; display:block; width:8px; height:14px; margin-top:-7px; content:""; background:url(/home/sonbul/images/sub/bread_more.png) no-repeat; cursor:pointer} .breadcrumb_wrap .breadcrumb > li:first-child a{ background:#fff url(/home/sonbul/images/sub/bread_home.jpg) left center no-repeat; text-indent:-9999px; padding:0 40px 0 0; } .breadcrumb_wrap .breadcrumb > li:last-child:after{ display:none; } .breadcrumb_wrap .breadcrumb > li:last-child a{ padding-right:10px} .breadcrumb_wrap .breadcrumb > li > a{ display:block; padding:0 20px 0 10px; line-height:47px;} .left_menu{ display:block; float:left; width:220px; margin-top:20px;} .left_menu h2{ background:url(/home/sonbul/images/sub/bg_left.jpg) no-repeat; width:220px; height:140px; color:#fff; text-align:center; line-height:140px; font-size:28px} .left_menu > ul > li { position:relative; border-left:#d7d7d7 solid 1px; border-right:#d7d7d7 solid 1px; font-size:16px; font-weight:500} .left_menu > ul > li:before{ position:absolute; right:18px; top:23px; margin-top:-9px; display:block; content:""; width:4px; height:18px; background:#cacaca; transition:0.3s } .left_menu > ul > li:after{ position:absolute; right:11px; top:23px; margin-top:-2px; display:block; content:""; width:18px; height:4px; background:#cacaca; transition:0.5s } .left_menu > ul > li.open:before{ top:23px; opacity:1; transform:rotate(-90deg)} .left_menu > ul > li.open:after{ position:absolute; right:11px; top:23px; margin-top:-2px; display:block; content:""; width:18px; height:4px; background:#008044;transform:rotate(180deg); transition:0.5s } .left_menu > ul > li.open > a{ color:#008044 } .left_menu > ul > li > a{ display:block; padding:15px 15px 15px 18px; border-bottom:#d7d7d7 solid 1px;} .left_menu > ul > li > ul{ display:none; background:#f8f8f8; padding:15px 15px 15px 20px; border-bottom:#d7d7d7 solid 1px; } .left_menu > ul > li > ul > li{ position:relative;} .left_menu > ul > li > ul > li > a{ display:block; font-size:16px; font-weight:300; color:#5c5c5c; padding:5px 0; border:0; padding-left:10px;} .left_menu > ul > li > ul > li > a:hover,.left_menu > ul > li > ul > li.active > a{ font-weight:500 } .left_menu > ul > li > ul > li:before{ position:absolute; top:13px; display:block; content:""; width:5px; height:3px; background:#5c5c5c} .content_wrap{ width:750px; float:right; padding-bottom:30px; overflow:hidden} .content_wrap .content_top{ padding-top:0; padding-bottom:10px; border-bottom:#c6c6c6 solid 1px; overflow:hidden } .content_wrap .content_top h3{ float:left; font-size:32px; font-weight:700; width:auto; padding:0; color:#484848; letter-spacing:-0.05em} .content_wrap .content_top .share_list{ float:right; } .content_wrap .content_top .share_list li{display:block; float:left; position:relative; margin-left:10px; z-index:100} .content_wrap .content_top .share_list li a{ display:block; width:50px;} .content_wrap .content_top .share_list > li:first-child{ width:50px; transition:0.5s} .content_wrap .content_top .share_list > li:last-child{ display:block; } .content_wrap .content_top .share_list li.open{ width:300px; transition:0.5s} .content_wrap .content_top .share_list li ul{ width:250px; position:absolute; top:0; left:50px; visibility:visible; transition:0.3s; overflow:hidden} .content_wrap .content_top .share_list li ul.open{ transition:0.3s; visibility:visible} .content_wrap .content_top .share_list li ul li{ float:left } .content_wrap .content{ padding:30px 0 ; min-height:500px} .satisfaction{ padding:30px;} .satisfaction h5{ font-size:16px; padding-left:0;} .satisfaction form#satisfy{ padding:0 0 5px 107px; background-size:auto;} .satisfaction form#satisfy .satisfy_list li{ float:left; } .satisfaction form#satisfy input[type='radio'] + label { margin-right:16px;} .satisfaction form#satisfy .write_wrap{ float:left; margin-bottom:20px; } .satisfaction form#satisfy .write_wrap #stsfdgCn{ width:256px; margin:0; } .satisfaction form#satisfy .write_wrap #stsfdgSubmit { width:100px; margin-left:-5px; margin-top:0;} .satisfaction .charger dl:after{ display:none} .satisfaction .charger dl dt,.satisfaction .charger dl dd{ float:left; } .satisfaction .charger dl dt{ width:auto; margin-right:20px;} .satisfaction .charger dl dd{ width:auto; margin-right:40px;} .satisfaction .charger .btn_error{ clear:none; float:right; margin:0; } #relative_site_area{ background:#fff; border-top:#525252 solid 1px; clear:both} #relative_site_area .relative_list{ margin-top:-1px} #relative_site_area .relative_list > li{ display:block !important; float:left; position:relative; width:20%; } #relative_site_area .relative_list > li > a{ display:block; padding:22px 0 22px 20px; color:#fff; font-size:16px; font-weight:500; background:#525252 url(/home/sonbul/images/main/arrow_up.png) 90% center no-repeat !important; border:#272727 solid 1px !important} #relative_site_area .relative_list > li > a:hover{ background-position:90% 40%; transition:0.3s } #relative_site_area .relative_list > li.admin_info > a{ background-color:#3776b7 !important; border:#104a86 solid 1px } #relative_site_area .relative_list > li.minwon_info > a{ background-color:#239b6f !important; border:#0f6545 solid 1px } #relative_site_area .relative_list > li.laguage_select{ display:none !important} #relative_site_area .relative_list > li > ul{ display:none; position:absolute; bottom:61px; background:#f6f6f6; width:100%; padding:15px; height:250px;border:#272727 solid 1px; overflow-y:auto} #relative_site_area .relative_list > li:hover > ul{ display:block} #relative_site_area .relative_list > li > ul > li{ } #relative_site_area .relative_list > li > ul > li > a{ display:block; padding:5px; color:#6f6f6f; font-size:14px; font-weight:500} #relative_site_area .relative_list > li > ul > li > a:hover{ color:#fff; background:#525252} #bottom{ padding-top:40px; } #bottom .logo{ float:right; text-align:left} #bottom .bottom_menu{ text-align:left;} #bottom .bottom_menu a{ font-size:14px} #bottom p{ text-align:left;} #bottom #go_top{ position:fixed; right:15px; bottom:15px; width:80px; margin:0; z-index:3000 } } @media all and (min-width:1100px) { .container{ width:1200px; margin:0 auto} #header .go_site .container{ width:1200px;} #header .etc_btn a.all_menu{ display:inline-block; background:url(/home/sonbul/images/common/icon_all.png) left center no-repeat } #header .etc_btn a.all_search{ display:inline-block; position:relative; width:auto; height:auto; text-indent:0; right:0; top:0; background:url(/home/sonbul/images/common/icon_search.png) left center no-repeat; background-size:21px; } #main_con_wrap{ padding:40px 0; } #main_con_wrap .introduce{ min-height:380px } #main_con_wrap .introduce .exp_box{ float:right; width:36%; padding:30px; padding-top:30px; } #main_con_wrap .introduce .exp_box .sub_title{ margin:20px 0; } #main_con_wrap .introduce .exp_box p{ font-size:12px; line-height:150%} #main_con_wrap .work_time{ min-height:380px } .content_wrap{ width:930px; } } /* 레이어팝업 */ .pop_wrap{border:0!important;} /*레이어 팝업2*/ .layer_pop{max-width:100%; border:1px solid #dedede!important;} .layer_pop div > br{display:none;} .layer_pop img{max-width:100%; height:auto;} .layer_pop p{margin-top:-2px;} @media all and (max-width:1023px){ .layer_pop{top:0px!important; left:0!important; height:auto !important} }