#wrap { position:relative; padding:0; margin:0; background:#f6f6f6;} #header { position:relative; } #header .container { max-width:1240px; padding:0 20px; margin:0 auto; box-sizing:border-box;} #header .top_area { position:relative; padding:.75em 0 0 0;} #header .top_area .container { display:flex; align-items:center; } #header .top_area .date { width:200px; } #header .top_area .info { flex:1 auto; font-size:.95em;} #header .top_area .service { position:relative; width:200px; display:flex; justify-content:flex-end; } #header .top_area .service p { display:inline-block; position:relative;} #header .top_area .service p a { display:block; padding:.15em .5em; font-size:.95em; } #header .top_area .service p.log:after {content:''; display:block; position:absolute; height:.7em; width:1px; background:#afafaf; right:0; top:.25em} #header .top_area .service p.log a { padding:.15em .75em .15em .5em;} #header .logo_area { position:relative; padding:0px 0 .75em 0;} #header .logo_area .container {display:flex; align-items:center; justify-content:space-between;} #header .logo_area .top_logo { display:block; width:250px; height:135px; background-size:cover; background-repeat:no-repeat;} #header .logo_area .logo_right_banner{width:170px; } #header .logo_area .logo_left_banner{width:170px; } #header .logo_area .logo_right_banner img{height:70px; width:170px; } #header .logo_area .logo_left_banner img{height:70px; width:170px;} #header .menu_area { position:relative; border-top:0px solid; border-bottom:0px solid; } #header .menu_area .container { display:flex; flex-wrap: nowrap; } #header .menu_area .btn_wrap { width:40px; } #header .menu_area .btn_wrap button { display:block; width:100%; height:100%; cursor:pointer; } #header .menu_area .btn_wrap button i {display:block; position:relative;} #header .menu_area .btn_wrap button i:before, #header .menu_area .btn_wrap button i:after {content:''; display:block; position:absolute;} #header .menu_area .all_menu_wrap i {width:32px; height:32px;} #header .menu_area .all_menu_wrap i:before {width:18px; height:2px; background-color:#333; top:9px; left:13px; box-shadow:0 7px #333, 0 14px #333;} #header .menu_area .search_wrap i {width:32px; height:32px;} #header .menu_area .search_wrap i:before {width:12px; height:12px; border:2px #333 solid; border-radius:100%; top:6px; left:4px;} #header .menu_area .search_wrap i:after {width:3px; height:9px; background:#333; transform:rotate(-45deg); top:17px; left:19px;} #header .menu_area .search_form_wrap {position:absolute; left:0; right:0; top:100%; z-index:999999999; display:none;background:#f6f6f6; border-bottom:1px solid #eaeaea;} #header .menu_area .search_form_inner { max-width:1200px; margin:0 auto; padding:1em 0; z-index:99999999; } #header .menu_area .search_form_inner form { display:flex; justify-content:center; } #header .menu_area .search_form_inner input {border:1px solid #ccc; border-right:none; width:50%; padding:0 1em; background:#fff; } #header .menu_area .search_form_inner button { display:inline-block; width:40px; height:40px; cursor:pointer; border:1px solid #ccc; border-left:none; background:#fff;} #header .menu_area .search_form_inner button i {display:block; position:relative;} #header .menu_area .search_form_inner button i:before, #header .menu_area .search_form_inner button i:after {content:''; display:block; position:absolute;} #header .menu_area .search_form_inner i {width:32px; height:32px;} #header .menu_area .search_form_inner i:before {width:12px; height:12px; border:2px #333 solid; border-radius:100%; top:6px; left:4px;} #header .menu_area .search_form_inner i:after {width:3px; height:8px; background:#333; transform:rotate(-45deg); top:19px; left:19px;} #header .menu_area .menu_wrap { flex:1 auto;} #header .menu_area .gnb { display:flex; } #header .menu_area .gnb li { flex:1 100%; position:relative; } #header .menu_area .gnb a { display:block; text-align:center; font-weight:500; padding:.62em 0; font-size:1.5em;} #header .menu_area .gnb li:after { content:''; height:.5em; width:1px; background:#838383; position:absolute; display:block; top:1.5em; right:0; transform:rotate(15deg); } #header .menu_area .gnb li:last-child:after { display:none;} #header .menu_area .gnb .gnb_sub { opacity:0; visibility: hidden; position:absolute; top:60px; z-index:99999999999999999999999999999999999; display:block; display:flex; flex-wrap:nowrap; background:#fff; left:0; -webkit-box-shadow: 0 5px 10px rgb(24 24 24 / 10%); -moz-box-shadow: 0 5px 10px rgba(24,24,24,.1); box-shadow: 0 5px 10px rgb(24 24 24 / 10%); -webkit-transition:.4s; -moz-transition: .4s; transition:.4s; border:1px solid;} #header .menu_area .gnb .gnb_sub li {} #header .menu_area .gnb .gnb_sub li:after { display:none;} #header .menu_area .gnb li:nth-child(8):after {display:none;} #header .menu_area .gnb li:nth-child(n+9) {display:none} #header .menu_area .gnb .gnb_sub li a { padding: 0.75em 1.5em; white-space: nowrap; font-size:1.1em; } #header .menu_area .gnb li:hover .gnb_sub { opacity:1; visibility: visible; top:60px; } #header .gnb_wrap {position:fixed; top:0; left:-323px; width:323px; height:100%; padding:40px; color:#fff; opacity:1; border-right:0px solid #dedede; box-sizing:border-box; overflow-y:auto; transition:left .5s; box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; z-index:999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999; background:#fff;} #gnb_wrap::-webkit-scrollbar { display: none; } ul.c-logo{display:flex; justify-content:right; margin:1em auto; margin-top:-10px;} ul.c-logo li{float:left; padding:0 0 0 0.3em;} #header .gnb_wrap .gnb li {} #header .gnb_wrap .gnb li:not(:nth-child(1)) {margin-top:20px;} #header .gnb_wrap .gnb li > a {display:block; padding:.5em 0; font-weight:bold; font-size:1.5em; border-bottom:1px dotted rgba(235,235,235,0.7); } #header .gnb_wrap .gnb li > a:hover { color:#fff;} /* 24.02.06 li.all_post */ #header .gnb_wrap .gnb li.all_post {margin-top:10px; margin-bottom:-10px; } #header .gnb_wrap .gnb li.all_post > a { border-bottom:none } #header .gnb_wrap .gnb li > ul {padding-top:10px;} #header .gnb_wrap .gnb li > ul li {margin-top:0 !important;} #header .gnb_wrap .gnb li > ul li a {font-weight:normal; font-size:1em; border-bottom:0;} #header .gnb_wrap .gnb li > ul li a:hover {text-decoration:underline; color:#fff;} #header .gnb_wrap.open { left:0; } #header .gnb_wrap button { position:absolute; right:10px; top:10px; width:40px; height:40px; } #header .gnb_wrap button:before {content:''; width:3px; height:70%; background:#fff; position:absolute; transform:rotate(45deg); top:12%; left:45%} #header .gnb_wrap button:after {content:''; width:3px; height:70%; background:#fff; position:absolute; transform:rotate(-45deg); top:12%; left:45%} #header .gnb_wrap .service { display:none; } #header .gnb_wrap .service p { display:inline-block; } #header .gnb_wrap .service p.log { margin-right:1em; } @media screen and (max-width: 926px) { #header .top_area {display:none;} #header .logo_area { position:relative; padding:0px;} #header .logo_area .container {justify-content:center; } #header .logo_area .container div {display:none;} #header .logo_area .top_logo { display:block; width:120px; height:65px;background-size:cover; background-repeat:no-repeat;} #header .menu_area {position:static; border:0;} #header .menu_area .btn_wrap {position:absolute; top:15px;} #header .menu_area .all_menu_wrap {left:20px;} #header .menu_area .search_wrap {right:20px;} #header .menu_area .menu_wrap {display:none;} #header .gnb_wrap .service { display:block; margin-bottom:0.8em;} } @media screen and (max-width: 767px) { #header {max-width:520px; margin:0 auto;} } #container { position:relative; width:100%; } #container .container { width:100%; max-width:1240px; margin:1.25em auto 0; position:relative;} @media screen and (max-width: 926px) { #container {border-top:1px solid #d7d7d7;} } #btm-sub-ad {width:100%; max-width:1240px; height:auto; padding:0 20px; margin:2em auto; box-sizing:border-box;} #btm-rong-ad {width:100%; height:auto; margin:2em 0; text-align:center;} #btm-rong-ad img {max-width:100%;} #footer { position:relative; margin-top:3em;} #footer .container { max-width:1200px; margin:0 auto; } #footer .company { position:relative; border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7; } #footer .company ul { width:100%; text-align:center;/* display:flex; justify-content:center; */} #footer .company li { display:inline-block; position:relative; } #footer .company li:after {content:''; height:.5em; width:1px; background:#838383; position:absolute; display:inline-block; top:1em; right:0; transform:rotate(15deg);} #footer .company li:last-child:after { display:none;} #footer .company a { display:inline-block; padding:1em 1.5em; font-size:.85em; color:#666 } #footer .addr {padding:2em 0 3em;} #footer .addr .container { display:flex; justify-content:space-around; align-items:flex-start } #footer .addr p {display:none; border:1px solid #d7d7d7; padding:.5em 1.5em; margin-top:1em; font-weight:bold; font-size:.85em; color:#666;} #footer .addr address { flex:1 auto; margin-left:2em;} #footer .addr em { display:block; font-size:.85em; padding-bottom:.5em; color:#666} #footer .addr em a.saup { display:inline-block; font-size:.9em; padding:.25em .5em; border:1px solid #ccc; border-radius:.25em; color:#444} #footer .addr em.copy {padding-top:0em; margin-top:-40px;} #footer .addr em.copy i { margin-left:3em; font-style:italic; color:#0a57cb;} .footer_ad_area { text-align:center;} @media screen and (max-width: 926px) { #btm-sub-ad iframe {width:100% !important;} #footer {border-top:1px solid #d7d7d7;} #footer .company {display:none;} #footer .addr {padding:2em 0.5em 0.5em; text-align:center;} #footer .addr .container {display:block;} #footer .addr p {display:inline-block;} #footer .addr address {margin-left:0; margin-top:1em; line-height:110%;} /* #footer .addr em {display:none;} */ #footer .addr em {display:block; text-align:center;} #footer .addr em.copy {display:block;} } #left_float_banner {position:absolute; left:-180px; width:200px; top:0; z-index:999;} #right_float_banner {position:absolute; right:-180px; width:200px; top:0; text-align:right; z-index:999;} @media screen and (max-width: 926px) { #left_float_banner, #right_float_banner { display:none;} } .paging_wrap {width:100%; height:auto; text-align:center;} .paging_wrap .paging_inner {padding:2em 0;} .paging_wrap a {font-size:.95em; display:inline-block; vertical-align:middle; width:2.5em; height:2.5em; text-align:center; line-height:2.5em; margin:0 2px; border:1px solid #ccc; border-radius:.25em; color:#666} .paging_wrap a:hover {border:1px solid #000; color:#000; } .paging_wrap a span { display:inline-block; text-indent:-9999px;} .paging_wrap a.page_current { color:#fff; background:#000; border:1px solid #000 } .paging_wrap a.page_other {font-family:'Dotum'; font-weight:600;} .paging_wrap a.page_other:before, .paging_wrap a.page_other:after {content:''; display:inline-block; vertical-align:middle;} .paging_wrap a.page_prev:before { width:.5em; height:.5em; margin-top:-1px; border:1px solid #000; border-left:none; border-top:none; transform:rotate(135deg); margin-left:.25em;} .paging_wrap a.page_first:before { width:.5em; height:.5em; margin-top:-1px; border:1px solid #000; border-left:none; border-top:none; transform:rotate(135deg); margin-left:.25em;} .paging_wrap a.page_first:after { width:.5em; height:.5em; margin-top:-1px; border:1px solid #000; border-left:none; border-top:none; transform:rotate(135deg);} .paging_wrap a.page_next:after { width:.5em; height:.5em; margin-top:-1px; border:1px solid #000; border-left:none; border-top:none; transform:rotate(-45deg); margin-left:-.25em;} .paging_wrap a.page_last:before { width:.5em; height:.5em; margin-top:-1px; border:1px solid #000; border-left:none; border-top:none; transform:rotate(-45deg); margin-left:-.25em;} .paging_wrap a.page_last:after { width:.5em; height:.5em; margin-top:-1px; border:1px solid #000; border-left:none; border-top:none; transform:rotate(-45deg);} @media screen and (max-width: 926px) { .paging_wrap a.page_list { display:none; } .paging_wrap a.page_list.page_sibling { display:inline-block; } #footer .addr em.copy {padding-top:0em; clear:both; margin-top:0px;} ul.c-logo{display:flex; justify-content:center; margin:1em auto;} ul.c-logo li{float:left;} } @media screen and (max-width: 767px) { .paging_wrap a.page_list.page_sibling_prev_3 {display:none;} .paging_wrap a.page_list.page_sibling_next_3 {display:none;} #footer .addr em.copy {padding-top:0em; clear:both; margin-top:0px;} ul.c-logo{display:flex; justify-content:center; margin:1em auto;} ul.c-logo li{float:left;} } @media screen and (max-width: 520px) { .paging_wrap a {font-size:.75em} .paging_wrap a.page_list.page_sibling_prev_2 {display:none;} .paging_wrap a.page_list.page_sibling_next_2 {display:none;} #footer .addr em.copy {padding-top:0em; clear:both; margin-top:0px;} ul.c-logo{display:flex; justify-content:center; margin:1em auto;} ul.c-logo li{float:left;} }