@charset "utf-8";
/**
 * 해운대구 미디어센터 — 공통 스타일
 *
 * 원래는 PHP 가 파일명을 해시로 조합해 내보내던 구조였다.
 * 그 출력을 그대로 고정해 정적 파일로 옮기고(렌더링 동일), * 한 줄로 뭉쳐 있던 것을 영역별로 펼쳤다.
 *
 * 규칙 순서는 원본 그대로다. CSS 는 나중에 온 규칙이 이기므로
 * 순서를 옮기면 화면이 달라진다. 고칠 때도 순서는 유지할 것.
 */

/* ==================================================================
   기본 요소
   ================================================================== */

html {
    overflow-x: hidden;
}
body {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: var(--gray-20);
    line-height: 1.6em;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    letter-spacing: -0.02em;
}
td {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: var(--gray-20);
    line-height: 1.6em;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    letter-spacing: -0.02em;
}
h1 {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: var(--gray-20);
    line-height: 1.6em;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    letter-spacing: -0.02em;
}
h2 {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: var(--gray-20);
    line-height: 1.6em;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    letter-spacing: -0.02em;
}
h3 {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: var(--gray-20);
    line-height: 1.6em;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    letter-spacing: -0.02em;
}
h4 {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: var(--gray-20);
    line-height: 1.6em;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    letter-spacing: -0.02em;
}
h5 {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: var(--gray-20);
    line-height: 1.6em;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    letter-spacing: -0.02em;
}
div {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: var(--gray-20);
    line-height: 1.6em;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    letter-spacing: -0.02em;
}
p {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: var(--gray-20);
    line-height: 1.6em;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    letter-spacing: -0.02em;
}
li {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: var(--gray-20);
    line-height: 1.6em;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    letter-spacing: -0.02em;
}
ul {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: var(--gray-20);
    line-height: 1.6em;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    letter-spacing: -0.02em;
}
ol {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: var(--gray-20);
    line-height: 1.6em;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    letter-spacing: -0.02em;
}
dd {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: var(--gray-20);
    line-height: 1.6em;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    letter-spacing: -0.02em;
}
dt {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: var(--gray-20);
    line-height: 1.6em;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    letter-spacing: -0.02em;
}
section {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: var(--gray-20);
    line-height: 1.6em;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    letter-spacing: -0.02em;
}
input {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: var(--gray-20);
    line-height: 1.6em;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    letter-spacing: -0.02em;
}
textarea {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: var(--gray-20);
    line-height: 1.6em;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    letter-spacing: -0.02em;
}
select {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: var(--gray-20);
    line-height: 1.6em;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    letter-spacing: -0.02em;
}
button {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: var(--gray-20);
    line-height: 1.6em;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    letter-spacing: -0.02em;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
li {
    margin: 0;
    padding: 0;
    list-style: none;
}
a {
    border: 0px;
    vertical-align: middle;
}
img {
    border: 0px;
    vertical-align: middle;
}
a {
    text-decoration: none;
}
strong {
    font-weight: 500;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
[class~=sview] {
    display: none;
}
[class~=mview] {
    display: none;
}

/* ==================================================================
   모바일 헤더
   ================================================================== */

#mobile_header {
    position: relative;
    width: 100%;
    height: 60px;
    line-height: 60px;
    border: 0px solid red;
    z-index: 999999;
    display: none;
}
#mobile_header [class~=inner] {
    top: 0;
    left: 0;
    z-index: 50;
    width: 100%;
    height: 60px;
    line-height: 60px;
    overflow: hidden;
    background: var(--gray-100);
}
#mobile_header h1 {
    width: 220px;
    padding-top: 10px;
    text-align: center;
    margin: 0 auto;
}
#mobile_header h1 img {
    width: 90%;
    overflow: hidden;
}
#mobile_header [class~=m_gnb] li {
    list-style: none;
}
#mobile_header [class~=m_gnb] li a {
    display: block;
    top: 0;
    width: 100%;
    text-align: center;
    color: transparent;
}
#mobile_header [class~=m_gnb] li[class~=category] a i {
    float: left;
    position: absolute;
    width: 20px;
    height: 20px;
    line-height: 20px;
    left: 15px;
    top: 20px;
    font-size: 20px;
    color: #111;
}
#mobile_header [class~=m_gnb] li[class~=home] a i {
    float: left;
    position: absolute;
    width: 20px;
    height: 20px;
    line-height: 20px;
    right: 15px;
    top: 20px;
    font-size: 20px;
    color: #111;
}
#back_cover {
    position: absolute;
    display: none;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    top: 0px;
    background: rgba(0,0,0,0.5);
    z-index: 9999998;
}

/* ==================================================================
   사이드 메뉴
   ================================================================== */

#sideMenu {
    display: inline;
    position: fixed;
    top: 0;
    left: -250px;
    width: 249px;
    height: 100%;
    background-color: var(--gray-100);
    z-index: 9999999;
}
#sideMenu [class~=side_title] {
    height: 60px;
    line-height: 60px;
    background-color: var(--gray-0);
    color: var(--gray-100);
    text-align: center;
    font-size: 1.3em;
    cursor: pointer;
}
#sideMenu [class~=navi_bg] {
    width: 100%;
}
#sideMenu [class~=nav] {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    padding-bottom: 30px;
    list-style: none;
    box-sizing: border-box;
    overflow: auto;
    height: 500px;
}
#sideMenu [class~=nav] ul {
    width: 100%;
    margin: 0;
    padding: 0;
}
#sideMenu [class~=navi_set] {
    display: inline;
    margin: 0;
    padding: 10px 0 10px 0;
    text-align: center;
}
#sideMenu [class~=navi_set] > div {
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid var(--gray-67);
    text-align: left;
    background-color: var(--gray-100);
    color: var(--gray-20);
    text-indent: 10px;
    cursor: pointer;
}
#sideMenu [class~=navi_set] > div > a {
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
}
#sideMenu [class~=navi_set] ul {
    display: none;
}
#sideMenu [class~=navi_set] ul li {
    list-style: none;
    border-bottom: 1px solid var(--gray-93);
}
#sideMenu [class~=navi_set] ul li a {
    display: block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: left;
    font-size: 0.9em;
    color: var(--gray-20);
    cursor: pointer;
    text-indent: 20px;
    background-color: var(--gray-100);
}
#sideMenu [class~=navi_set] ul li a:hover {
    color: var(--gray-100);
    background-color: var(--gray-67);
}

/* ==================================================================
   주메뉴 (GNB)
   ================================================================== */

#gnba {
    background-color: var(--gray-40);
    text-align: center;
    padding: 10px 0;
}
#gnba i {
    color: var(--gray-100);
    font-size: 30px;
}
#gnba a {
    color: var(--gray-100);
    text-align: center;
    font-size: 0.85em;
    padding: 5px 10px;
    margin: 0 2px;
    background: var(--orange-53);
    border-radius: 3px;
}
#gnba a:hover {
    background: var(--gray-100);
    color: var(--gray-0);
}
[class~=jbmFixed] {
    position: fixed !important;
    top: 0;
    left: 0;
}
[class~=jbmFixed] [class~=inner] {
    border-bottom: 1px solid var(--gray-87) !important;
}

/* ==================================================================
   헤더
   ================================================================== */

#header_wrap {
    width: 100%;
    min-width: 1200px;
    overflow-x: hidden;
}
[class~=wrap_box] {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
[class~=wrap_box] h1[class~=logo_a] a img {
    display: inline;
    vertical-align: middle;
}

/* ==================================================================
   상단 유틸리티 바
   ================================================================== */

#top-bar {
    position: relative;
    top: 0px;
    width: 100%;
    min-width: 320px;
    height: 40px;
}
#top-bar:after {
    content: "";
    display: block;
    clear: both;
}
#top-bar [class~=inner] {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
#top-bar [class~=gnbb] {
    position: absolute;
    right: 0;
}
#top-bar [class~=gnbb] a {
    display: inline-block;
    color: var(--gray-100);
    font-size: 0.9em;
    line-height: 40px;
    padding: 0 10px;
    text-shadow: 0px 0px 3px rgba(0,0,0,.5);
}
#top-bar [class~=gnbb] a i {
    margin-right: 5px;
}
#top-bar [class~=gnbb] a:hover {
    color: var(--orange-53);
    text-shadow: 0px 0px 3px rgba(0,0,0,0);
}
#top-bar [class~=gnbb] a:hover i {
    color: var(--orange-53);
    text-shadow: 0px 0px 3px rgba(0,0,0,0);
}

/* ==================================================================
   헤더  (이어서)
   ================================================================== */

#header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 80px;
    background: rgba(255, 255, 255, 0);
    z-index: 500 !important;
    transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
    -moz-transition: 0.5s all ease;
    -ms-transition: 0.5s all ease;
    -o-transition: 0.5s all ease;
}
#header h1 {
    position: absolute;
    display: block;
    line-height: 80px;
    left: 0;
    transition: all .3s ease-in-out;
    background: none;
}
#header[class~=header_on] {
    background: rgba(0, 0, 0, .5);
}
#header[class~=header_on]:hover [class~=header_line] {
    width: 100%;
    height: 80px;
    border-bottom: 1px solid rgba(255,255,255,.15);
}

/* ==================================================================
   서브 좌측 메뉴 (LNB)
   ================================================================== */

#lnb {
    float: right;
}
#lnb:hover [class~=lnb_wrap] {
    height: 310px;
}
#lnb [class~=lnb_wrap] {
    overflow: hidden;
    height: 80px;
    min-height: 80px;
    transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
    -moz-transition: 0.5s all ease;
    -ms-transition: 0.5s all ease;
    -o-transition: 0.5s all ease;
}
#lnb [class~=lnb_wrap] > ul > li {
    float: left;
    padding: 0;
    margin: 0;
}
#lnb [class~=lnb_wrap] > ul > li > a {
    display: block;
    width: 100%;
    padding: 0 40px;
    font-size: 1.2em;
    font-weight: 500;
    color: var(--gray-100);
    text-shadow: 0px 0px 3px rgba(0,0,0,.5);
    height: 80px;
    line-height: 80px;
}
#lnb [class~=lnb_wrap] > ul > li > a > span {
    display: block;
    width: 0%;
    height: 1px;
    background: var(--gray-87);
    margin: 0 auto;
    transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
    -moz-transition: 0.5s all ease;
    -ms-transition: 0.5s all ease;
    -o-transition: 0.5s all ease;
}
#lnb [class~=lnb_wrap] > ul > li[class~=current] > a {
    color: var(--orange-53);
    font-weight: 500;
    transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
    -moz-transition: 0.5s all ease;
    -ms-transition: 0.5s all ease;
    -o-transition: 0.5s all ease;
}
#lnb [class~=lnb_wrap] > ul > li[class~=actived] > a {
    color: var(--orange-53);
    font-weight: 500;
    transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
    -moz-transition: 0.5s all ease;
    -ms-transition: 0.5s all ease;
    -o-transition: 0.5s all ease;
}
#lnb [class~=lnb_wrap] > ul > li[class~=current] > a > span {
    display: block;
    background: var(--orange-53);
    width: 100%;
    margin-top: -1px;
}
#lnb [class~=lnb_wrap] > ul > li[class~=actived] > a > span {
    display: block;
    background: var(--orange-53);
    width: 100%;
    margin-top: -1px;
}
#lnb:hover [class~=lnb_wrap] > ul > li > a {
    color: var(--gray-100);
    text-shadow: 0px 0px 3px rgba(0,0,0,0);
}
#lnb [class~=lnb_wrap] > ul > li:hover > a {
    color: var(--orange-53);
}
#lnb [class~=lnb_sub] {
    margin-top: 20px;
    text-align: center;
}
#lnb [class~=lnb_sub] li a {
    display: block;
    color: var(--gray-100);
    padding: 0;
    margin: 0 0 2px 0;
    height: 30px;
    line-height: 30px;
    font-size: 1em;
    letter-spacing: -0.5px;
    transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
    -moz-transition: 0.5s all ease;
    -ms-transition: 0.5s all ease;
    -o-transition: 0.5s all ease;
}
#lnb [class~=lnb_sub] li a:hover {
    display: block;
    color: var(--orange-53);
    font-weight: 400;
}
[class~=jbFixed] {
    min-height: auto !important;
}
[class~=jbFixed] [class~=header_in] {
    position: fixed !important;
    top: 0px;
    width: 100% !important;
    background: rgba(0, 0, 0, .75);
}
[class~=jbFixed] [class~=header_in] [class~=header_line] {
    height: 60px !important;
    border-bottom: 0px solid rgba(0,0,0,.1) !important;
}
[class~=jbFixed] [class~=header_in] #lnb {
    margin-top: 0;
}
[class~=jbFixed] [class~=header_in] #lnb:hover [class~=lnb_wrap] {
    height: 280px;
}
[class~=jbFixed] [class~=header_in] #lnb [class~=lnb_wrap] {
    height: 60px;
    min-height: 60px;
}
[class~=jbFixed] [class~=header_in] #lnb [class~=lnb_wrap] > ul > li > a {
    height: 60px;
    line-height: 60px;
    color: var(--gray-100);
    text-shadow: 0px 0px 3px rgba(0,0,0,0);
}
[class~=jbFixed] [class~=header_in] #lnb [class~=lnb_wrap] > ul > li:hover > a {
    color: var(--orange-53);
}
[class~=jbFixed] [class~=header_in] #lnb [class~=lnb_sub] li a {
    display: block;
    color: var(--gray-100);
    padding: 0;
    margin: 0 0 2px 0;
    height: 30px;
    line-height: 30px;
    font-size: 1em;
    letter-spacing: -0.5px;
}
[class~=jbFixed] [class~=header_in] #lnb [class~=lnb_sub] li a:hover {
    display: block;
    color: var(--orange-53);
    font-weight: 400;
}

/* ==================================================================
   주메뉴 (GNB)  (이어서)
   ================================================================== */

[class~=jbFixed] [class~=header_in] #gnbb a {
    height: 60px;
    line-height: 60px !important;
}
[class~=jbFixed] [class~=header_in] h1 {
    height: 60px;
    line-height: 50px !important;
}
[class~=jbFixed] [class~=header_in] h1 img {
    width: 80%;
    transition: all .3s ease-in-out;
}

/* ==================================================================
   본문 영역
   ================================================================== */

#container_wrap {
    width: 100%;
    min-width: 320px;
    background: var(--gray-100);
}
#container_wrap:after {
    content: "";
    display: block;
    clear: both;
}

/* ==================================================================
   헤더 검색
   ================================================================== */

#hd_sch {
    border-radius: 30px;
    overflow: hidden;
    width: 660px;
    margin: 0 auto;
}
#hd_sch #sch_stx {
    float: left;
    width: 600px;
    height: 70px;
    padding-left: 30px;
    border-radius: 30px 0 0 30px;
    background: #fffc;
    border: 0;
    border-right: 0;
    font-size: 1.8em;
    color: var(--gray-0);
}
#hd_sch #sch_submit {
    float: left;
    width: 60px;
    height: 70px;
    border: 0;
    background: var(--gray-18);
    color: var(--gray-100);
    border-radius: 0 30px 30px 0;
    cursor: pointer;
    font-size: 16px;
}

/* ==================================================================
   메인 비주얼
   ================================================================== */

#main_visual [class~=sliderkit-text] {
    width: 100%;
    height: 100px;
    position: absolute;
    top: 60%;
    margin-top: -40px;
    left: 50%;
    margin-left: -50%;
    text-align: center;
    z-index: 2;
}
#main_visual {
    position: relative;
    width: 100%;
    min-width: 320px;
    padding: 0;
    text-align: center;
    margin: 0px auto;
}
#main_visual [class~=swiper-slide] {
    width: 100%;
    height: auto;
    padding: 0;
    background-color: var(--gray-0);
    overflow: hidden;
}
#main_visual [class~=swiper-slide] div[class~=backgroundimg] {
    width: 100%;
    height: 100%;
    z-index: 1;
}
#main_visual [class~=swiper-slide] [class~=backgroundimg] [class~=mobile_only] {
    display: none;
}
#main_visual [class~=swiper-slide] [class~=backgroundimg] img {
    width: 100%;
    height: auto;
}

/* ==================================================================
   메인 배너  (이어서)
   ================================================================== */

#m_bnr2 {
    width: 100%;
    min-width: 520px;
    margin: 10px auto;
}
#m_bnr2:after {
    content: "";
    display: block;
    clear: both;
}
#m_bnr2 [class~=con_box] {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
}
#m_bnr2 [class~=con_box] ul {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#m_bnr2 [class~=con_box] ul li {
    position: relative;
    float: left;
    width: 16.5%;
    margin-right: 0.2%;
    height: 180px;
    overflow: hidden;
}
#m_bnr2 [class~=con_box] ul li:last-child {
    margin-right: 0;
}
#m_bnr2 [class~=con_box] ul li a {
    display: block;
    overflow: hidden;
}
#m_bnr2 [class~=con_box] ul li[class~=bg1] {
    background: #7db3b6;
}
#m_bnr2 [class~=con_box] ul li[class~=bg2] {
    background: #6482a6;
}
#m_bnr2 [class~=con_box] ul li[class~=bg3] {
    background: var(--gray-20);
}
#m_bnr2 [class~=con_box] ul li [class~=txt-box] {
    position: absolute;
    left: 30px;
    top: 35px;
    z-index: 1;
    display: block;
    width: 100%;
}
#m_bnr2 [class~=con_box] ul li [class~=txt-box] strong {
    display: block;
    font-size: 1.5em;
    font-weight: 700;
    color: var(--gray-100);
    line-height: 100%;
    margin-bottom: 20px;
}
#m_bnr2 [class~=con_box] ul li [class~=txt-box] p {
    font-size: 1em;
    color: rgba(255,255,255,0.9);
    line-height: 1.5em;
    letter-spacing: -0.05em;
    margin-bottom: 25px;
}
#m_bnr2 [class~=con_box] ul li [class~=txt-box] [class~=more] {
    font-size: 0.85em;
    width: 70px;
    color: var(--gray-100);
    background-position: left center;
    transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
    -moz-transition: 0.5s all ease;
    -ms-transition: 0.5s all ease;
    -o-transition: 0.5s all ease;
}
#m_bnr2 [class~=con_box] ul li:hover [class~=more] {
    left: 40px;
    background: url('../html/image/btn_arrow.png')no-repeat 40px center;
    transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
    -moz-transition: 0.5s all ease;
    -ms-transition: 0.5s all ease;
    -o-transition: 0.5s all ease;
}
#m_bnr2 [class~=con_box] ul li [class~=img-box] {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    text-align: right;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#m_bnr2 [class~=con_box] ul li [class~=img-box] img {
    width: 100%;
    height: 100%;
    transition: all .3s ease;
}
#m_bnr2 [class~=con_box] ul li a:focus [class~=img-box] img {
    transform: scale(1.1);
}
#m_bnr2 [class~=con_box] ul li a:hover [class~=img-box] img {
    transform: scale(1.1);
}

/* ==================================================================
   푸터
   ================================================================== */

#footer {
    clear: both;
    width: 100%;
    padding-bottom: 50px;
    background: var(--gray-13);
}
#footer:after {
    content: "";
    display: block;
    clear: both;
}
#footer [class~=copy_bar] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
#footer [class~=copy_bar] div[class~=copy_menu] {
    float: left;
    width: 80%;
    padding: 25px 0;
}
#footer [class~=copy_bar] div[class~=copy_menu] a {
    display: inline-block;
    padding-right: 15px;
    font-size: 1em;
    color: var(--gray-100);
}
#footer [class~=copy_bar] div[class~=copy_menu] a[class~=active] {
    color: var(--orange-53);
}
#footer [class~=copy_bar] div[class~=family_site] {
    float: right;
    width: 20%;
    padding: 20px 0;
    text-align: right;
    color: var(--gray-100);
}
#footer [class~=copy_bar] div[class~=family_site] select {
    width: 90%;
    height: 40px;
    padding-left: 10px;
    border: 1px solid var(--gray-27);
    color: var(--gray-100);
    font-size: 0.9em;
    background-color: transparent !important;
}
#footer [class~=copy_bar] div[class~=family_site] select option {
    color: var(--gray-0);
}
#footer [class~=copy_area] {
    clear: both;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 20px;
    border-top: 1px solid var(--gray-27);
}
#footer [class~=copy_area]:after {
    content: "";
    display: block;
    clear: both;
}
#footer [class~=copyright] {
    width: 100%;
    padding: 0;
}
#footer [class~=copyright] p {
    width: 100%;
    font-size: 0.9em;
    color: var(--gray-53);
    padding-top: 10px;
}
#footer [class~=copyright] p span {
    display: inline-block;
    color: var(--gray-53);
    margin-right: 15px;
}

/* ==================================================================
   맨 위로
   ================================================================== */

#backtotop {
    position: fixed;
    bottom: 40%;
    right: 0;
    z-index: 1000;
    display: none;
}

/* ==================================================================
   서브 비주얼
   ================================================================== */

#sub_visual {
    clear: both;
    width: 100%;
    min-width: 320px;
    margin: 0 auto;
    height: 240px;
    text-align: center;
    background: var(--gray-0);
}
#sub_visual [class~=backgroundimg] {
    position: relative;
    width: 100%;
    min-width: 320px;
    height: 100%;
    text-align: center;
    z-index: 0;
}
#sub_visual [class~=visual_area] {
    position: relative;
    width: 100%;
    height: 100%;
}
/* 배너 사진 위에 흰 글씨(로고·메뉴·제목)가 얹힌다. 밝은 사진이 걸리면 읽을 수가 없다.
   사진 전체를 고르게 어둡게 하면 배너가 죽으므로, 글씨가 있는 위쪽만 진하게 깔고
   아래로 갈수록 옅어지는 그늘을 씌운다. */
#sub_visual [class~=visual_area]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
                rgba(0, 0, 0, .62) 0%,
                rgba(0, 0, 0, .34) 45%,
                rgba(0, 0, 0, .18) 100%);
    pointer-events: none;
}
#sub_wrapper {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}
#sub_wrapper:after {
    content: "";
    display: block;
    clear: both;
}
#sub_menu {
    display: block;
    width: 100%;
    margin: 0px auto;
}
/* 게시판 탭 줄 — 어두운 바 위에 지금 보고 있는 곳만 주황 칸으로 표시한다.
   예전에는 12% 고정 폭 흰 상자였다. 글자 길이는 제각각인데 칸이 같아
   "사진찾아가세요"는 꽉 차고 "직원전용"은 헐거웠고, 흰 상자가 어두운 바 위에 얹혀 겉돌아 보였다.
   모서리는 사이트에서 가장 많이 쓰는 3px 로 맞춘다. */
[class~=sub_location] {
    width: 100%;
    max-width: 1600px;
    background: var(--gray-18);
    padding: 11px 0;
    /* 아래쪽은 .scontents 의 위 여백 30px 과 목록 버튼 줄의 10px 이 또 붙는다.
       여기서 0 을 줘도 실제로는 45px 이 벌어진다. */
    margin: 12px auto 0;
}
[class~=sub_location] ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    width: 100%;
    max-width: 1200px;
    padding: 0;
    margin: 0 auto;
}
[class~=sub_location] ul li {
    display: block;
    width: auto;
    height: auto;
    line-height: normal;
    text-align: center;
    border: 0;
    margin: 0;
    background: transparent;
}
[class~=sub_location] ul li a {
    display: block;
    height: auto;
    line-height: 1;
    padding: 12px 24px;
    border-radius: 3px;
    font-size: 15px;
    color: rgba(255, 255, 255, .7);
    background: transparent;
    transition: color .2s ease, background-color .2s ease;
}
[class~=sub_location] ul li a:hover, [class~=sub_location] ul li a:focus {
    color: var(--gray-100);
    background: rgba(255, 255, 255, .13);
}
[class~=sub_location] ul li a[class~=on] {
    color: var(--gray-100);
    background: var(--orange-50);
    font-weight: 600;
}

/* ==================================================================
   서브 제목
   ================================================================== */

#sub_tit {
    position: absolute;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    top: 100px;
    left: 50%;
    margin-left: -600px;
    border: 0px solid red;
}
#sub_tit [class~=path] {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    border: 0px solid red;
    text-align: center;
}
#sub_tit [class~=path] li {
    display: inline-block;
    text-align: center;
    font-size: 0.9em;
    padding: 0 8px 0 12px;
    margin: 0;
    color: var(--gray-100);
    background: url('../html/image/ico_path.png') no-repeat left center;
}
#sub_tit [class~=path] li a span[class~=ic-home] {
    padding: 0;
    cursor: pointer;
    border: 0px solid red;
}
#sub_tit [class~=path] li a span[class~=ic-home] i {
    background: url('../html/image/icon_home_over.png') no-repeat left center;
    display: inline-block;
    width: 11px;
    height: 11px;
}
#sub_tit [class~=path] li:first-child {
    background: none;
}
#sub_tit [class~=path] li:last-child {
    color: var(--gray-100);
    font-weight: 500;
}
#sub_tit [class~=title] {
    position: relative;
    padding-bottom: 10px;
    font-size: 2.4em;
    font-weight: 700;
    color: var(--gray-100);
    text-align: center;
    text-transform: uppercase;
}
#sub_tit [class~=title]:after {
    display: none;
    content: "";
    width: 5%;
    height: 3px;
    margin: 10px auto;
    background: var(--gray-100);
}
#sub_tit [class~=normal_txt] {
    display: none;
    margin: 0;
    font-size: 1.2em;
    color: var(--gray-100);
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
    word-break: keep-all;
    font-family: 'Noto Sans KR', sans-serif;
}
[class~=scontents] {
    width: 100%;
    max-width: 1600px;
    height: 100%;
    margin: 0px auto;
    padding: 30px 0 100px 0;
    background: none;
}
[class~=scontents]:after {
    content: "";
    display: block;
    clear: both;
}
[class~=scontents] [class~=bg_vline] {
    display: none;
    width: 1px;
    height: 30px;
    margin: 0px auto;
}
[class~=scontents] h3[class~=title] {
    font-size: 2.5em;
    text-align: center;
    margin-top: 0px;
}
[class~=scontents] [class~=eng] {
    display: block;
    text-align: center;
    font-size: 2.5em;
    color: var(--gray-33);
    font-weight: 300;
    margin: 0px 0;
    font-family: 'Noto Sans KR', sans-serif;
}
[class~=scontents] [class~=eng] em {
    color: var(--gray-0);
    font-style: normal;
    font-weight: 500;
}
[class~=scontents] [class~=stitle] {
    font-size: 1.2em;
    line-height: 1.5em;
    text-align: center;
    color: var(--gray-20);
    margin: 10px 0 50px 0;
}
[class~=scontents] [class~=stitle]:after {
    display: block;
    width: 100%;
    border-bottom: 1px solid var(--gray-87);
    height: 30px;
    background-color: red;
}

/* ==================================================================
   반응형
   ================================================================== */

@media screen and (max-width:360px) {
}

@media all and (max-width:1200px) {
    [class~=scontents] {
        width: 96%;
    }

}

@media all and (max-width:1200px) {
    #container {
        margin-top: 0px;
    }

}

@media all and (max-width:1200px) {
    #m_bnr2 [class~=con_box] ul li [class~=img-box] img {
        width: auto;
        height: auto;
    }

}

@media all and (max-width:1200px) {
    #lnb [class~=lnb_wrap] > ul > li > a {
        padding: 0 20px;
    }

}

@media all and (max-width:1200px) {
    [class~=wrap_box] {
        width: 98%;
    }

}

@media all and (max-width:1200px) {
    #sub_tit {
        left: 0;
        margin-left: 0;
    }

}

@media all and (max-width:1200px) {
    #backtotop {
        display: none !important;
    }

}

@media all and (max-width:1100px) {
    #mobile_header {
        display: block;
        min-width: 320px;
    }

}

@media all and (max-width:1100px) {
    #header_wrap {
        display: none;
    }

}

@media all and (max-width:1100px) {
    [class~=sview] {
        display: block;
    }

}

@media all and (max-width:1100px) {
    #top-bar {
        display: none;
    }

}

@media all and (max-width:1100px) {
    #sub_visual {
        margin-top: 0px;
    }

}

@media all and (max-width:1100px) {
    [class~=scontents] h3[class~=title] {
        text-align: center;
    }

}

@media all and (max-width:1100px) {
    [class~=scontents] [class~=eng] {
        text-align: center;
    }

}

@media all and (max-width:1100px) {
    [class~=scontents] [class~=stitle] {
        text-align: center;
    }

}

@media all and (max-width:1100px) {
    [class~=scontents] {
        width: 96%;
    }

}

@media all and (max-width:1100px) {
    #container {
        margin-top: 0px;
    }

}

@media all and (max-width:1100px) {
    #main_visual {
        top: 0px;
    }

}

@media all and (max-width:1100px) {
    #main_visual [class~=swiper-slide] {
        width: 100%;
        height: auto;
    }

}

@media all and (max-width:1100px) {
    #main_visual [class~=swiper-slide] div[class~=backgroundimg] {
        height: auto;
    }

}

@media all and (max-width:1100px) {
    #main_visual [class~=sliderkit-text] {
        height: 100px;
        margin-top: -60px;
    }

}

@media all and (max-width:1100px) {
    #footer {
        min-width: 320px;
        padding-bottom: 30px;
    }

}

@media all and (max-width:1100px) {
    #footer [class~=copy_bar] div[class~=copy_menu] {
        width: 70%;
    }

}

@media all and (max-width:1100px) {
    #footer [class~=copy_bar] div[class~=family_site] {
        width: 30%;
    }

}

@media all and (max-width:1100px) {
    #footer [class~=copyright] {
        width: 100%;
        padding: 0 30px;
    }

}

@media all and (max-width:1100px) {
    #footer [class~=copyright] p {
        text-align: center;
    }

}

@media all and (max-width:1100px) {
    #backtotop {
        right: 15px;
    }

}

@media all and (max-width:1100px) {
    [class~=sub_location] ul:first-child {
        border-left: 0px;
    }

}

@media all and (max-width:1100px) {
    [class~=sub_location] ul li {
        width: auto;              /* 탭은 글자 길이에 맞춘다 */
    }

}

@media all and (max-width:1100px) {
    #sub_tit {
        margin: 0px auto;
        padding: 0;
        left: 0%;
        margin-left: 0px;
        background: none;
    }

}

@media all and (max-width:1100px) {
    #sub_tit [class~=title] {
        font-size: 2em;
    }

}

@media all and (max-width:1100px) {
    #sub_tit [class~=title]:after {
        display: none;
        content: "";
        width: 15%;
        height: 3px;
        background: var(--gray-100);
        margin: 10px auto;
    }

}

@media all and (max-width:1100px) {
    #sub_tit [class~=normal_txt] {
        font-size: 1.2em;
        color: var(--gray-100);
        text-transform: uppercase;
        text-align: center;
        line-height: 1.6;
        word-break: keep-all;
        text-shadow: 0px 1px 4px var(--gray-20);
        font-family: 'Noto Sans KR', sans-serif;
    }

}

@media all and (max-width:1100px) {
    [class~=visual_area] {
        background-position: center top !important;
        background-size: cover !important;
    }

}

@media screen and (max-width:768px) {
    [class~=mview] {
        display: block;
    }

}

@media screen and (max-width:768px) {
    #main_visual [class~=swiper-slide] [class~=backgroundimg] [class~=mobile_only] {
        display: block;
    }

}

@media screen and (max-width:768px) {
    #main_visual [class~=swiper-slide] [class~=backgroundimg] [class~=pc_only] {
        display: none;
    }

}

@media screen and (max-width:768px) {
    #hd_sch {
        border-radius: 30px;
        overflow: hidden;
        width: 360px;
        margin: 0 auto;
    }

}

@media screen and (max-width:768px) {
    #hd_sch #sch_stx {
        float: left;
        width: 300px;
        height: 40px;
        padding-left: 10px;
        border-radius: 30px 0 0 30px;
        background: #fffc;
        border: 0;
        border-right: 0;
        font-size: 1.25em;
        color: var(--gray-100);
    }

}

@media screen and (max-width:768px) {
    #hd_sch #sch_submit {
        float: left;
        width: 60px;
        height: 40px;
        border: 0;
        background: var(--gray-18);
        color: var(--gray-100);
        border-radius: 0 30px 30px 0;
        cursor: pointer;
        font-size: 16px;
    }

}

@media screen and (max-width:768px) {
    #main_visual [class~=sliderkit-text] {
        width: 100%;
        height: 100px;
        position: absolute;
        top: 30%;
        margin-top: 0px;
        left: 50%;
        margin-left: -50%;
        text-align: center;
        z-index: 2;
    }

}

@media screen and (max-width:768px) {
    #m_bnr2 {
        margin-bottom: 0;
    }

}

@media screen and (max-width:768px) {
    #m_bnr2 [class~=con_box] ul li {
        width: 100%;
    }

}

@media screen and (max-width:768px) {
    [class~=sub_location] {
        height: auto;
        overflow: hidden;
    }

}

@media screen and (max-width:768px) {
    [class~=sub_location] ul li {
        width: auto;
        height: auto;
    }

}

@media screen and (max-width:768px) {
    [class~=sub_location] ul li a {
        padding: 10px 14px;
        font-size: 13px;
        height: auto;
        line-height: 1;
    }

}

@media screen and (max-width:768px) {
    [class~=scontents] {
        padding: 0 0 50px 0;
    }

}

@media screen and (max-width:768px) {
    [class~=scontents] [class~=stitle] {
        margin-bottom: 30px;
    }

}

@media screen and (max-width:480px) {
    body {
        font-size: 13px;
    }
    td {
        font-size: 13px;
    }
    h1 {
        font-size: 13px;
    }
    h2 {
        font-size: 13px;
    }
    h3 {
        font-size: 13px;
    }
    h4 {
        font-size: 13px;
    }
    h5 {
        font-size: 13px;
    }
    div {
        font-size: 13px;
    }
    p {
        font-size: 13px;
    }
    li {
        font-size: 13px;
    }
    ul {
        font-size: 13px;
    }
    ol {
        font-size: 13px;
    }
    dd {
        font-size: 13px;
    }
    dt {
        font-size: 13px;
    }
    section {
        font-size: 13px;
    }
    input {
        font-size: 13px;
    }
    textarea {
        font-size: 13px;
    }
    select {
        font-size: 13px;
    }
    button {
        font-size: 13px;
    }

}

@media screen and (max-width:480px) {
    #main_visual [class~=sliderkit-text] {
        margin-top: -50px;
    }

}

@media screen and (max-width:480px) {
    #main_visual [class~=sliderkit-text] div span {
        font-size: 0.7em;
    }

}

@media screen and (max-width:480px) {
    #footer [class~=copy_bar] div[class~=copy_menu] {
        width: 100%;
        text-align: center;
    }

}

@media screen and (max-width:480px) {
    #footer [class~=copy_bar] div[class~=family_site] {
        width: 100%;
        text-align: center;
    }

}

@media screen and (max-width:480px) {
    #footer [class~=copyright] span {
        font-size: 1em;
    }

}

@media screen and (max-width:480px) {
    #footer [class~=copyright] p {
        font-size: 0.8em;
    }

}

@media screen and (max-width:480px) {
    #sub_visual {
        height: 120px;
    }

}

@media screen and (max-width:480px) {
    #sub_visual [class~=backgroundimg] {
        height: 120px;
    }

}

@media screen and (max-width:480px) {
    #sub_visual [class~=visual_area] {
        height: 120px;
        background-position: center top;
        background-size: cover;
    }

}

@media screen and (max-width:480px) {
    #sub_tit {
        top: 75px;
        background: none;
        margin: 30px auto;
    }

}

@media screen and (max-width:480px) {
    #sub_tit [class~=path] {
        display: none;
    }

}

@media screen and (max-width:480px) {
    #sub_tit [class~=title] {
        font-size: 1.5em;
    }

}

@media screen and (max-width:480px) {
    #sub_tit [class~=normal_txt] {
        font-size: 1em;
    }

}

@media screen and (max-width:480px) {
    [class~=scontents] [class~=eng] {
        font-size: 2em;
    }

}

@media screen and (max-width:480px) {
    [class~=scontents] [class~=stitle] {
        font-size: 1em;
    }

}

/* 머리글과 배너 제목은 사진 위에 흰 글씨로 얹힌다.
   위쪽 그늘(#sub_visual .visual_area::after)로 대부분 해결되지만, 흰 파도나 밝은 하늘이 정확히 글자 뒤에 오는 경우가 있어 옅은 그림자를 하나 더 깐다.
   로고는 이미지라 text-shadow 가 듣지 않으므로 drop-shadow 를 쓴다. */
#lnb #mainMenu > li > a, #sub_tit {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.logo_a img {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
}