@charset "utf-8";

/* Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700,800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre:500&display=swap');

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* 초기화 및 기본 설정 */
html { overflow-y:scroll; height:100% }
body { 
    margin:0; padding:0; font-size:0.75em; 
    font-family: GmarketSansMedium, 'Malgun Gothic', noto sans kr, dotum, sans-serif;
    background:#fff; line-height:1.4; color:#222; height:100%; font-weight:300; letter-spacing:-.5px;
}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img { margin:0; padding:0; border:0 }
h1, h2, h3, h4, h5, h6 { 
    font-size:1em; font-weight:500;
    font-family: GmarketSansMedium, 'Malgun Gothic', noto sans kr, dotum, sans-serif;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block }
img { max-width:100% }

ul, ol, dl, dt, dd { margin:0; padding:0; list-style:none }
legend { position:absolute; margin:0; padding:0; font-size:0; line-height:0; text-indent:-9999em; overflow:hidden }
label, input, button, select, img { vertical-align:middle; font-size:1em }
input, button, textarea, select { 
    margin:0; padding:0; font-size:1em;
    font-family: GmarketSansMedium, 'Malgun Gothic', dotum, sans-serif;
}
input[type="submit"] { cursor:pointer }
button { cursor:pointer; outline:none }

textarea, select { font-family: GmarketSansMedium, 'Malgun Gothic', dotum, sans-serif; font-size:1em }
select { margin:0; border:1px solid #ddd; height:36px; padding:0 0 0 9px; cursor:pointer; color:#222; }
p { margin:0; padding:0; word-break:break-all }
hr { display:none; background:#ddd; border:none; height:1px }
pre { overflow-x:scroll; font-size:1.1em }
a, a:link, a:visited { color:#000; text-decoration:none; -webkit-tap-highlight-color : transparent }

/* Box-sizing */
*, :after, :before {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

/* Form Elements */
input[type=text], input[type=password], input[type=date] { 
    padding:0 5px; border:1px solid #ddd; color:#222; line-height:34px; height:36px; border-radius:3px;
    -webkit-transition:all 0.30s ease-in-out;
    -moz-transition:all 0.30s ease-in-out;
    -ms-transition:all 0.30s ease-in-out;
    -o-transition:all 0.30s ease-in-out;
    outline:none;
    -webkit-appearance:none;
}

input[type=text]::-webkit-input-placeholder, 
input[type=password]::-webkit-input-placeholder, 
textarea::-webkit-input-placeholder { color:#bbb }
input[type=text]:-ms-input-placeholder, 
input[type=password]:-ms-input-placeholder, 
textarea:-ms-input-placeholder { color:#bbb }
input[type=text]:-moz-placeholder, 
input[type=password]:-moz-placeholder, 
textarea:-moz-placeholder { color:#bbb }

input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
    -webkit-box-shadow:0 0 5px #9ed4ff;
    -moz-box-shadow:0 0 5px #9ed4ff;
    box-shadow:0 0 5px #9ed4ff;
    border:1px solid #558ab7 !important;
}

.placeholdersjs { color:#aaa !important }

input[type=text], input[type=password], input[type=submit], input[type=image], button { 
    border-radius:3px; font-size:1em; -webkit-appearance:none 
}

.styled_select { 
    height:36px; overflow:hidden; border:1px solid #ddd; background:#fff; 
    display:inline-block; border-radius:3px; vertical-align:middle; position:relative 
}
.styled_select i { 
    position:absolute; right:10px; text-align:center; height:34px; 
    line-height:32px; top:0; font-size:14px 
}
.styled_select select { 
    background:transparent; height:34px; border:0; -webkit-appearance: none; 
    outline:none; padding-right:40px; width:100%; vertical-align:top; position:relative; z-index:1 
}
.styled_select select:disabled { cursor:default; background:#f0f0f0 }
.styled_select select::-ms-expand { display:none }

textarea {
    color:#222; font-size:1em; line-height:1.5; border:1px solid #ddd; 
    padding:10px; width:100%; border-radius:3px; vertical-align:top;
    -webkit-transition:all 0.30s ease-in-out;
    -moz-transition:all 0.30s ease-in-out;
    -ms-transition:all 0.30s ease-in-out;
    -o-transition:all 0.30s ease-in-out;
    outline:none;
}

address { font-style:normal }
strong, b, th { font-weight:500; }
table { width:100%; border-collapse:collapse; border-spacing:0 }
caption { display:none; font-size:0; line-height:0 }

/* 레이아웃 크기 지정 */
#hd, #wrapper, #ft { min-width:1200px }
#hd_pop, #hd_wrapper, #tnb .inner, #gnb .gnb_wrap, #container_wr, #ft_wr { width:1200px }

/* 팝업레이어 */
#hd_pop { z-index:1000; position:relative; margin:0 auto; height:0 }
#hd_pop h2 { position:absolute; font-size:0; line-height:0; overflow:hidden }
.hd_pops { position:absolute; border:1px solid #e9e9e9; background:#fff }
.hd_pops img { max-width:100% }
.hd_pops_con { color:#222 }
.hd_pops_footer { 
    padding:0; background:#000; color:#fff; text-align:left; position:relative;
    display:block; visibility:hidden; clear:both; content:"";
}
.hd_pops_footer:after { display:block; visibility:hidden; clear:both; content:"" }
.hd_pops_footer button { padding:10px; border:0; color:#fff }
.hd_pops_footer .hd_pops_reject { background:#000; text-align:left }
.hd_pops_footer .hd_pops_close { background:#393939; position:absolute; top:0; right:0 }

/* 상단 레이아웃 */
#hd { background:#212020 }
#hd_h1 { position:absolute; font-size:0; line-height:0; overflow:hidden }

#tnb { border-bottom:1px solid #383838; margin:0 auto }
#tnb:after { display:block; visibility:hidden; clear:both; content:"" }
#tnb .inner { margin:0 auto }

#hd_wrapper { position:relative; margin:0 auto; height:140px; zoom:1 }
#hd_wrapper:after { display:block; visibility:hidden; clear:both; content:"" }

#logo { float:left; padding:30px 0 0 }

.hd_sch_wr { float:left; padding:30px 0; width:445px; margin-left:65px }
#hd_sch h3 { position:absolute; font-size:0; line-height:0; overflow:hidden }
#hd_sch { border-radius:30px; overflow:hidden }
#hd_sch #sch_stx { 
    float:left; width:385px; height:45px; padding-left:10px; 
    border-radius:30px 0 0 30px; background:#2c2c2c; border:0; 
    border-right:0; font-size:1.25em; color:#fff 
}
#hd_sch #sch_submit { 
    float:left; width:60px; height:45px; border:0; background:#2c2c2c; 
    color:#fff; border-radius:0 30px 30px 0; cursor:pointer; font-size:16px 
}

#hd_qnb { float:right; text-align:right }
#hd_qnb:after { display:block; visibility:hidden; clear:both; content:"" }
#hd_qnb li { 
    float:left; font-size:1.083em; line-height:14px; 
    border-right:1px solid #4a4a4a; position:relative; text-align:center; 
    margin:15px 10px 15px 0; padding-right:10px 
}
#hd_qnb li:last-child { padding-right:0; margin-right:0; border-right:0 }
#hd_qnb li span { display:block; margin-top:5px; font-size:0.92em }
#hd_qnb li a { display:inline-block; color:#919191 }
#hd_qnb .visit .visit-num { 
    display:inline-block; line-height:16px; padding:0 5px; margin-left:5px; 
    border-radius:10px; background:#da22f5; color:#fff; font-size:10px 
}

.hd_login { position:absolute; right:0; top:60px }
.hd_login li { 
    float:left; margin:0 5px; border-left:1px solid #616161; 
    padding-left:10px; line-height:13px 
}
.hd_login li:first-child { border-left:0 }
.hd_login a { color:#fff }

/* 메인메뉴 */
#gnb { position:relative; background:#fff }
#gnb > h2 { position:absolute; font-size:0; line-height:0; overflow:hidden }
#gnb .gnb_wrap { margin:0 auto; position:relative }
#gnb .gnb_wrap:hover, #gnb .gnb_wrap:focus, #gnb .gnb_wrap:active { z-index:3 }
#gnb #gnb_1dul { font-size:1.083em; padding:0; border-bottom:1px solid #e0e2e5; zoom:1 }
#gnb ul:after { display:block; visibility:hidden; clear:both; content:"" }
#gnb .gnb_1dli { float:left; line-height:55px; padding:0px; position:relative }
#gnb .gnb_1dli:hover > a { 
    color:#3a8afd;
    -webkit-transition:background-color 2s ease-out;
    -moz-transition:background-color 0.3s ease-out;
    -o-transition:background-color 0.3s ease-out;
    transition:background-color 0.3s ease-out;
}

.gnb_1dli .bg { 
    position:absolute; top:24px; right:8px; display:inline-block; 
    width:10px; height:10px; overflow:hidden; 
    background:url('../img/gnb_bg2.gif') no-repeat 50% 50%; text-indent:-999px 
}
.gnb_1da { display:block; font-weight:bold; padding:0 15px; color:#080808; text-decoration:none }
.gnb_1dli.gnb_al_li_plus .gnb_1da { padding-right:25px }
.gnb_2dli:first-child { border:0 }
.gnb_2dul { display:none; position:absolute; top:54px; min-width:140px; padding-top:2px }
.gnb_2dul .gnb_2dul_box { 
    border:1px solid #e0e2e5; border-top:0; padding:0;
    -webkit-box-shadow:0px 1px 5px rgba(97, 97, 97, 0.2);
    -moz-box-shadow:0px 1px 5px rgba(97, 97, 97, 0.2);
    box-shadow:0px 1px 5px rgba(97, 97, 97, 0.2);
}
.gnb_2da { 
    display:block; padding:0 10px; line-height:40px; background:#fff; 
    color:#080808; text-align:left; text-decoration:none 
}
a.gnb_2da:hover { 
    color:#3a8afd; background:#f7f7f8;
    -moz-transition:all 0.3s ease-out;
    -o-transition:all 0.3s ease-out;
    transition:all 0.3s ease-out;
}

.gnb_2da:focus, .gnb_2da:hover { color:#fff }
.gnb_1dli_over .gnb_2dul { display:block; left:0 }
.gnb_1dli_over2 .gnb_2dul { display:block; right:0 }
.gnb_wrap .gnb_empty { 
    padding:10px 0; width:100%; text-align:center; 
    line-height:2.7em; color:#080808 
}
.gnb_wrap .gnb_empty a { color:#3a8afd; text-decoration:underline }
.gnb_wrap .gnb_al_ul .gnb_empty, 
.gnb_wrap .gnb_al_ul .gnb_empty a { color:#555 }

#gnb .gnb_menu_btn { 
    background:#4158d1; color:#fff; width:50px; height:55px; 
    border:0; vertical-align:top; font-size:18px 
}
#gnb .gnb_close_btn { 
    background:#fff; color:#b6b9bb; width:50px; height:50px; 
    border:0; vertical-align:top; font-size:18px; position:absolute; top:0; right:0 
}
#gnb .gnb_mnal { float:right; padding:0 }

#gnb_all { 
    display:none; position:absolute; border:1px solid #c5d6da; 
    width:100%; background:#fff; z-index:1000;
    -webkit-box-shadow:0 2px 5px rgba(0,0,0,0.2);
    -moz-box-shadow:0 2px 5px rgba(0,0,0,0.2);
    box-shadow:0 2px 5px rgba(0,0,0,0.2);
}
#gnb_all h2 { font-size:1.3em; padding:15px 20px; border-bottom:1px solid #e7eeef }
#gnb_all .gnb_al_ul:after { display:block; visibility:hidden; clear:both; content:"" }
#gnb_all .gnb_al_ul > li:nth-child(5n+1) { border-left:0 }
#gnb_all .gnb_al_li { 
    float:left; width:20%; min-height:150px; padding:20px; 
    border-left:1px solid #e7eeef 
}
#gnb_all .gnb_al_li .gnb_al_a { 
    font-size:1.2em; display:block; position:relative; margin-bottom:10px; 
    font-weight:bold; color:#3a8afd 
}
#gnb_all .gnb_al_li li { line-height:2em }
#gnb_all .gnb_al_li li a { color:#555 }
#gnb_all_bg { 
    display:none; background:rgba(0,0,0,0.1); width:100%; height:100%; 
    position:fixed; left:0; top:0; z-index:999 
}

/* 중간 레이아웃 */
#wrapper {}
#container_wr:after { display:block; visibility:hidden; clear:both; content:"" }
#container_wr { margin:0 auto; height:100%; zoom:1 }
#aside { float:right; width:235px; padding:0; height:100%; margin:20px 0 20px 20px }

#container { 
    position:relative; float:left; min-height:500px; height:auto !important; 
    margin:20px 0; height:500px; font-size:1em; width:930px; zoom:1 
}
#container:after { display:block; visibility:hidden; clear:both; content:"" }
#container_title { font-size:1.333em; margin:0 auto; font-weight:bold }
#container_title span { margin:0 auto 10px; display:block; line-height:30px }

.lt_wr { width:32% }
.lt_wr:nth-child(3n+1) { clear:both }
.latest_wr { margin-bottom:20px }
.latest_wr:after { display:block; visibility:hidden; clear:both; content:"" }
.latest_top_wr { margin:0 -10px 20px }
.latest_top_wr:after { display:block; visibility:hidden; clear:both; content:"" }

/* 하단 레이아웃 */
#ft { background:#212020; margin:0 auto; text-align:center }
#ft h1 { position:absolute; font-size:0; line-height:0; overflow:hidden }
#ft_wr { 
    max-width:1240px; margin:0; padding:40px 0; position:relative; 
    display:inline-block; text-align:left 
}
#ft_wr:after { display:block; visibility:hidden; clear:both; content:"" }
#ft_wr .ft_cnt { width:25%; float:left; padding:0 20px }

#ft_link { text-align:left }
#ft_link a { display:block; color:#fff; line-height:2em; font-weight:bold }
#ft_company h2 { font-size:1.2em; margin-bottom:20px }
#ft_company { font-weight:normal; color:#e3e3e3; line-height:2em }
#ft_catch { margin:20px 0 10px }
#ft_copy { 
    text-align:center; width:1200px; margin:0 auto; padding:20px 0; 
    color:#5b5b5b; font-size:0.92em; border-top:1px solid #383838 
}
#top_btn { 
    position:fixed; bottom:20px; right:20px; width:50px; height:50px; 
    line-height:46px; border:2px solid #333; color:#333; text-align:center; 
    font-size:15px; z-index:90; background:rgba(255,255,255,0.5) 
}
#top_btn:hover { border-color:#3059c7; background:#3059c7; color:#fff }

/* 글로벌 클래스 */
.txt_black { color:#222 !important }
.txt_white { color:#fff !important }
.txt_gray { color:#aaa !important }
.txt_red { color:#cc121d !important }
.txt_blue { color:#069be8 !important }
.txt_orange { color:#ffaa00 !important }
.txt_green { color:#8ecd09 !important }
.txt_brown { color:#9f5e15 !important }
.wrap:after { content:""; display:block; clear:both }
.clear:after { content:""; display:block; clear:both }
.center { text-align:center !important }
.left { text-align:left !important }
.right { text-align:right !important }
.f_left { float:left !important }
.f_right { float:right !important }
.skip { font-size:0; text-indent:-9000px; line-height:0; display:none }
.ellipsis { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block }
input.short { width:70px; text-align:center }
input.long { width:100% }
input.half { width:49% }
ul:after { clear:both; content:""; display:block }
.overflow_y { overflow-x:hidden; overflow-y:scroll; border:1px solid #ddd }

.succession { margin-top:20px !important }
.paragraph { margin-bottom:40px !important }
span.space { display:inline-block; width:20px }
.prepare { width:500px; margin:50px auto; padding:50px; border:1px solid #eaeaea }
.prepare h2 { font-size:24px; text-align:center; margin:0 0 20px }
.prepare h2 i { font-size:50px; margin:0 0 20px; display:block; color:#ddd }
.prepare p { text-align:center; font-size:13px }

.pc_no { display:none !important }
.mobile_only { display:none !important }
.s_mobile_only { display:none !important }
.ahref { 
    position:absolute; text-indent:-9000px; background:red; 
    display:inline-block; opacity:0; filter:alpha(opacity=0) 
}

/* 버튼 스타일 */
a, .btn { transition:all .3s }
.btn { 
    padding:.8rem 1.4rem .9rem 1.4rem; line-height:1; font-weight:500; 
    border:1px solid #ccc; transition:all .2s; display:inline-block; 
    border-radius:0; outline:none; vertical-align:middle; border-radius:3px; 
    font-size:1em; text-decoration:none !important 
}
a.btn, .btn { font-weight:500 }
.btn-primary { background:#2188d8; border-color:#2188d8; color:#fff !important }
.btn-primary-line { background:#fff; border-color:#2188d8; color:#2188d8 !important }
.btn-info { background:#3e444c; border-color:#2f343a; color:#fff !important }
.btn-green { background:#71c702; border-color:#71c702; color:#fff !important }
.btn-green-line { background:#fff; border-color:#71c702; color:#71c702 !important }
.btn-red { background:#e93c20; border-color:#e93c20; color:#fff !important }
.btn-red-line { background:#fff; border-color:#e93c20; color:#e93c20 !important }
.btn-default { background:#fff }
.btn-lg { padding:1.1rem 2.4rem; font-size:1.1rem; border-radius:5px }
.btn-ml { padding:10px 20px 12px 20px; font-size:14.5px; border-radius:5px }
.btn-ml i { font-size:14px }
.btn-sm { padding:0 15px; height:36px; line-height:32px; font-size:.95rem; border-radius:3px }
.btn-sm i { font-size:14px }
.btn-xs { padding:5px 7px 6px 7px; font-size:.95rem; border-radius:3px }
.btn-xs i { font-size:14px }

a.btn, .btn { 
    line-height:35px; height:35px; padding:0 10px; text-align:center; 
    font-weight:bold; border:0; font-size:1.4em;
    -webkit-transition:background-color 0.3s ease-out;
    -moz-transition:background-color 0.3s ease-out;
    -o-transition:background-color 0.3s ease-out;
    transition:background-color 0.3s ease-out;
}

a.btn01 { 
    display:inline-block; padding:7px; border:1px solid #ccc; 
    background:#fafafa; color:#000; text-decoration:none; vertical-align:middle 
}
a.btn01:focus, a.btn01:hover { text-decoration:none }
button.btn01 { 
    display:inline-block; margin:0; padding:7px; border:1px solid #ccc; 
    background:#fafafa; color:#000; text-decoration:none 
}
a.btn02 { 
    display:inline-block; padding:7px; border:1px solid #3b3c3f; 
    background:#4b545e; color:#fff; text-decoration:none; vertical-align:middle 
}
a.btn02:focus, .btn02:hover { text-decoration:none }
button.btn02 { 
    display:inline-block; margin:0; padding:7px; border:1px solid #3b3c3f; 
    background:#4b545e; color:#fff; text-decoration:none 
}

.btn_confirm { text-align:right } /* 서식단계 진행 */

.btn_submit { border:0; background:#3a8afd; color:#fff; cursor:pointer; border-radius:3px }
.btn_submit:hover { background:#2375eb }
.btn_close { border:1px solid #dcdcdc; cursor:pointer; border-radius:3px; background:#fff }
a.btn_close { text-align:center; line-height:50px }

a.btn_cancel { 
    display:inline-block; background:#969696; color:#fff; 
    text-decoration:none; vertical-align:middle 
}
button.btn_cancel { 
    display:inline-block; background:#969696; color:#fff; 
    text-decoration:none; vertical-align:middle 
}
.btn_cancel:hover { background:#aaa }
a.btn_frmline, button.btn_frmline { 
    display:inline-block; width:128px; padding:0 5px; height:40px; 
    border:0; background:#434a54; border-radius:3px; color:#fff; 
    text-decoration:none; vertical-align:top 
} /* 우편번호검색버튼 등 */
a.btn_frmline {}
button.btn_frmline { font-size:1em }

/* 게시판용 버튼 */
a.btn_b01, .btn_b01 { 
    display:inline-block; color:#bababa; text-decoration:none; 
    vertical-align:middle; border:0; background:transparent 
}
.btn_b01:hover, .btn_b01:hover { color:#000 }
a.btn_b02, .btn_b02 { 
    display:inline-block; background:#253dbe; padding:0 10px; 
    color:#fff; text-decoration:none; border:0; vertical-align:middle 
}
a.btn_b02:hover, .btn_b02:hover { background:#0025eb }
a.btn_b03, .btn_b03 { 
    display:inline-block; background:#fff; border:1px solid #b9bdd3; 
    color:#646982; text-decoration:none; vertical-align:middle 
}
a.btn_b03:hover, .btn_b03:hover { background:#ebedf6 }
a.btn_b04, .btn_b04 { 
    display:inline-block; background:#fff; border:1px solid #ccc; 
    color:#707070; text-decoration:none; vertical-align:middle 
}
a.btn_b04:hover, .btn_b04:hover { color:#333; background:#f9f9f9 }
a.btn_admin, .btn_admin { 
    display:inline-block; color:#d13f4a; text-decoration:none; vertical-align:middle 
} /* 관리자 전용 버튼 */
.btn_admin:hover, a.btn_admin:hover { color:#ff3746 }

.btn_guide { position:fixed; z-index:100; right:0; top:40% }
.btn_guide a { 
    display:block; background:red; color:#fff; width:100px; 
    line-height:30px; text-align:center; margin:0 0 3px; font-weight:500 
}

/* 탭메뉴 */
.tab_menu ul { font-size:0; margin:0 0 0 1px }
.tab_menu li { display:inline-block; }
.tab_menu li a { 
    display:inline-block; border:1px solid #e0e0e0; padding:12px 25px; 
    margin:0 0 0 -1px; color:#999; font-weight:400; font-size:.9rem; background:#fff 
}
.tab_menu li:hover a { background:#f0f0f0 }
.tab_menu li.on a { 
    border-color:#000; color:#222; position:relative; z-index:1; background:#fff 
}
.tab_con > section { display:none }

/* 팝업 레이어 */
#popLayerBg { 
    position:fixed; z-index:99; width:100%; height:100%; 
    background:#000; opacity:0.8; filter:alpha(opacity=80); display:none 
}
.pop_layer { 
    z-index:100; display:none; position:fixed; left:50%; top:50%; 
    transform:translate(-50%, -50%); background:#fff; border-radius:0; 
    box-shadow:0 0 5px rgba(0,0,0,0.6); 
}
.pop_layer > header { background:#576f8d; height:46px; border-radius:0; }
.pop_layer > header h2 { 
    text-align:center; font-family:nanumsquare; font-size:18px; 
    font-weight:500; color:#fff; line-height:42px; 
}
.pop_layer .btn_close { 
    position:absolute; top:12px; right:12px; display:block; 
    font-size:20px; text-align:center; width:20px; height:20px; 
    line-height:20px; text-indent:-9000px; background:url(../img/btn_close.png) no-repeat; 
    background-size:100% 
}
.pop_layer > header + .con { padding:30px; padding-bottom:40px }
.pop_layer .btn_add i { font-size:19px }
.pop_layer .btn_area { text-align:center; margin:30px 0 0 0 }
.pop_layer .btn_area .btn { min-width:150px }

.wrap { width:1200px; margin:0 auto; position:relative }

/* 헤더 */
#header { 
    height:100px; position:fixed; width:100%; z-index:100; color:#fff; 
    transition:all .3s; top:0; border-bottom:1px solid #ddd; 
    background-color: rgba(255, 255, 255, 0.7);
}
#header a { color:#000 }
#header h1 { float:left; line-height:98px }
#header h1 a { 
    text-indent:-9000px; font-size:0; width:250px; height:42px; 
    background-image:url(../img/ci.png); background-position:0 0; 
    display:inline-block; vertical-align:middle; overflow:hidden; 
    background-size:100%; transition:none 
}
#header .gnb { float:right; margin:25px 0 0 0; transition:all .3s }
#header .gnb .depth1 { float:left; padding:0 40px; position:relative; }
#header .gnb .depth1 > a { 
    display:inline-block; height:55px; line-height:55px; 
    font-size:1.25em; font-weight:600 
}
#header .gnb .depth1 ul { padding-top:0; transition:all .3s; height:0; overflow:hidden }
#header .gnb .depth2 > a { 
    display:inline-block; font-weight:500; font-size:1.05em; 
    line-height:1.4; padding:7px 0 
}
#header .btn_user { 
    float:right; margin:35px 0 0 0; display:block; font-size:19px 
}
#header .user { 
    position:absolute; right:-35px; top:80px; width:80px; 
    opacity:0; transition:all .3s 
}
#header .user a { 
    border:1px solid #ddd; display:block; height:0; line-height:37px; 
    font-size:0.85em; padding:0 12px; text-transform:uppercase; 
    margin-left:-1px; text-align:center; margin-top:-1px; 
    color:rgba(0,0,0,0.5); background:#fff; font-weight:400 
}
#header .user a:hover { color:#222 }
#header .user.on { opacity:1 }
#header .user.on a { height:40px }
#header .sns { float:right; margin:37px 13px 0 0 }
#header .sns li { float:left; margin:0 3px }
#header .sns li a { 
    width:24px; height:24px; display:block; background-position:0 0; 
    background-repeat:no-repeat; overflow:hidden; text-indent:-9000px; font-size:0 
}
#header .sns li:nth-child(1) a { background-image:url(../img/icon_kakao_bg.png) }
#header .sns li:nth-child(2) a { background-image:url(../img/icon_insta_bg.png) }
#header .sns li:nth-child(3) a { background-image:url(../img/icon_youtube_bg.png) }
#header .btn_search { float:right; margin:34px 20px 0 0; display:block; font-size:19px }

.hd_sch_wr { display:none; margin:0; padding:0 }
.hd_sch_wr.on { 
    display:block; position:fixed; left:0; top:0; width:100%; 
    height:100%; z-index:101 
}
.hd_sch_wr .box { 
    width:400px; background:#fff; left:50%; top:50%; 
    transform:translate(-50%, -51%); position:absolute; 
}
.hd_sch_wr .bo_sch_bg { background:rgba(0,0,0,0.7); width:100%; height:100% }
.hd_sch_wr header { 
    background:#4c525c; text-align:center; color:#fff; 
    font-size:1.25em; font-weight:500; line-height:48px; height:50px 
}
.hd_sch_wr header .btn_close { 
    width:25px; height:25px; position:absolute; right:10px; top:0; 
    border:0; background:transparent; display:inline-block; 
    border-radius:0; font-size:0 
}
#hd_sch { border-radius:0; padding:20px }
#hd_sch #sch_stx { 
    background:#fff; border:1px solid #ddd; width:calc(100% - 50px); 
    color:#222; border-radius:5px 0 0 5px; border-right:0; font-size:1.05em 
}
#hd_sch #sch_submit { 
    width:50px;background:#fff; border:1px solid #ddd; color:#222; 
    border-radius:0 5px 5px 0; border-left:0 
}
#hd_sch #sch_submit i { vertical-align:2px }

#header.on { background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.2); height:80px }
#header.on h1 { line-height:78px }
#header.on a { color:rgba(0,0,0,0.7) }
#header.on h1 a { background-position:0 -42px }
#header.on .gnb { margin-top:16px }
#header.on .btn_user { margin-top:26px }
#header.on .btn_search { margin-top:26px }
#header.on .user { top:70px }
#header.on .sns { margin-top:28px }
#header.on .sns li a { background-position:0 -24px }

#header.down { background:#fff; height:80px }
#header.down a { color:rgba(0,0,0,0.7) }
#header.down h1 a { background-position:0 -42px }
#header.down .gnb .depth1 { overflow:hidden }
#header.down .gnb .depth1 > a { margin-bottom:10px }
#header.down .gnb .depth1:hover > a { color:#C1272D }
#header.down .gnb .depth1 ul { height:auto; overflow:visible  }
#header.down .gnb .depth2 > a:hover { color:#C1272D }
#header.down .sns li a { background-position:0 -24px }

/* 푸터 */
#footer { 
    padding:50px 0; margin:100px 0 0 0; background:#fff; 
    color:#999; border-top:1px solid #e0e0e0 
}
#footer.main { margin:0 }
#footer h1 { float:left }
#footer h1 a { 
    text-indent:-9000px; font-size:0; width:125px; height:42px; 
    background-image:url(../img/ci.png); background-position:0 -84px; 
    display:block; overflow:hidden 
}
#footer nav { position:absolute; right:0; top:0 }
#footer nav li { float:left; margin:0 0 0 17px; }
#footer dt, #footer dd { display:inline-block }
#footer dt { font-weight:500 }
#footer dd { margin:0 20px 0 5px }
#footer .copyright { margin:10px 0 0 0 }
#footer #top_btn { 
    border:0; background:rgba(0,0,0,0.5); font-size:30px; 
    color:#fff; right:30px; bottom:30px 
}
#footer #top_btn:hover { background:rgba(0,0,0,1) }
#footer #top_btn i { vertical-align:2px }

/* 메인 비주얼 */
#main_visual { 
    height:calc(100%); text-align:center; color:#fff; 
    position:relative; z-index:1 
}
#main_visual .bx-wrapper { 
    border:0; box-shadow:none; background:transparent; 
    height:100%; margin-bottom:0 
}
#main_visual .bx-viewport { height:100% !important }
#main_visual .bx-pager {  }
#main_visual .slider { height:100% }
#main_visual .roll { 
    background-size:cover; height:100%; background-position:center 
}
#main_visual .roll_video .black { 
    position:absolute; width:100%; height:100%; 
    background:url(../img/visual_pattern.png); z-index:-1 
}
#main_visual .roll_video video { 
    position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); 
    min-width:100%; min-height:100%; z-index:-2; max-width:8000px !important; 
    -webkit-transform: translate(-50%, -50%); 
}

/* 메인 비주얼 이미지 */
#main_visual .roll01 { background-image:url(../img/visual01.jpg) }
#main_visual .roll02 { background-image:url(../img/visual02.jpg) }
#main_visual .roll03 { background-image:url(../img/visual03.jpg) }
#main_visual .roll04 { background-image:url(../img/visual04.jpg) }
#main_visual .roll_youtube { background-image:url(../img/visual02.jpg) } /* 모바일 유튜브 대체 이미지 경로 */

#main_visual .slider h2 { 
    line-height:1.3; margin:40vh 0 0 0; font-size:5em; 
    font-weight:700; animation:up .5s .4s forwards; opacity:0 
}
#main_visual .slider p { 
    font-size:1.8em; line-height:1.4; margin:30px 0 0 0; 
    animation:down .5s .7s forwards; opacity:0 
}
#main_visual .slider .btn_more { 
    display:inline-block; margin:36px 0 0 0; text-indent:-9000px; 
    font-size:0; width:33px; height:33px; border:1px solid #fff; 
    border-radius:50%; background:url(../img/btn_more.png) no-repeat center; 
    opacity:0; animation:opacity .5s 1.2s forwards 
}
#main_visual .slider .btn_more:hover { 
    transform:rotate(-90deg); background-color:#000; border-color:#000 
}
#main_visual .bx-controls { 
    position:absolute; bottom:70px; width:100%; text-align:center; z-index:55 
}
#main_visual .bx-controls-direction { display:none }
#main_visual .bx-pager { display:inline-block; vertical-align:middle }
#main_visual .bx-pager > div { display:inline-block; }
#main_visual .bx-pager a { 
    text-indent:-9000px; font-size:0; display:inline-block; 
    width:20px; height:20px; border:2px solid #fff; 
    border-radius:50%; margin:0 3px 
}
#main_visual .bx-pager a.active { background:#fff }
#main_visual .bx-controls-auto { display:inline-block; vertical-align:middle }
#main_visual .bx-controls-auto > div { display:inline-block }
#main_visual .bx-controls-auto a { 
    display:inline-block; height:20px; width:20px; color:#fff; 
    text-indent:-9000px; font-size:0; background-position:center; 
    background-repeat:no-repeat; margin:0 5px 
}
#main_visual .bx-controls-auto a.bx-start { background-image:url(../img/btn_play.png) }
#main_visual .bx-controls-auto a.bx-stop { background-image:url(../img/btn_pause.png) }
#main_visual .bx-controls-auto a.active { display:none }

#main_visual .latest { 
    position:absolute; z-index:60; bottom:50px; left:50%; 
    margin-left:-600px; text-align:left; width:350px 
}
#main_visual .latest header {  }
#main_visual .latest header:after { 
    width:47px; height:2px; background:#fff; display:block; 
    content:""; margin:15px 0 
}
#main_visual .latest header h2 { 
    font-size:34px; font-weight:600; display:inline-block; vertical-align:middle 
}
#main_visual .latest header h2 strong { 
    font-weight:600; color:#ffb400; line-height:1 
}
#main_visual .latest header a { margin:0 0 0 10px; display:inline-block }
#main_visual .latest header a:hover { transform:rotate(-90deg) }
#main_visual .latest .con p { 
    font-size:16px; color:rgba(255,255,255,0.65); margin:0 0 8px; word-break:keep-all 
}
#main_visual .latest .con p.subj { 
    color:rgba(255,255,255,1); font-size:21px; font-weight:500; letter-spacing:-.5px; 
}
#main_visual .latest .con p.date { 
    color:rgba(255,255,255,1); font-size:23px; font-weight:600; 
}
#main_visual .latest .con a { 
    height:38px; line-height:35px; border:1px solid #fff; 
    border-radius:19px; padding:0 24px; color:#fff; 
    display:inline-block; font-size:1.2em; margin-top:10px; margin-bottom:30px 
}
#main_visual .latest .con a:hover { background:#fff; color:#222 }

.youtube-background { 
    background: #000; position: absolute; top: 0; right: 0; 
    bottom: 0; left: 0; z-index: -99; 
}
.youtube-foreground, .youtube-background iframe { 
    position: absolute;  top: 0; left: 0; width: 100%; 
    height: 100%; pointer-events: none; 
}
@media (min-aspect-ratio: 16/9) {
  .youtube-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .youtube-foreground { width: 400%; left: -150%; }
}

/* 메인 어바웃 */
.main_about { position:relative; overflow:hidden; padding:150px 0 }
.main_about .bg { 
    width:100%; height:100%; position:fixed; 
    background:url(../img/main_about_bg.png) no-repeat center top; 
    background-size:cover; top:0; z-index:-1 
}
/*.main_about .img { float:left; width:40%; position:relative }
.main_about .img img:last-child { position:absolute; right:30px; top:300px } */
.main_about .text { float:right; width:100%; }
.main_about .text h2 { 
    font-size:90px; font-weight:300; line-height:1; margin:0 0 60px -80px 
}
.main_about .text h2 strong { font-weight:700 }
.main_about .text h3 { 
    font-size:28px; letter-spacing:-1px; font-weight:600; margin:0 0 30px 
}
.main_about .text p { 
    font-size:19px; color:rgba(0,0,0,0.7); line-height:1.4; margin:0 0 25px 
}
.main_about .btn_area a { 
    width:100%; height:50px; line-height:46px; text-align:center; 
    display:inline-block; border-radius:19px; background:transparent; 
    font-size:18px; border:1px solid #666; margin:15px 10px 0 0  
}
.main_about .btn_area a:hover { background:#333; color:#fff; border-color:#333 }
.main_about dl dt { 
    font-size:24px; font-weight:700; margin:60px 0 10px 0; line-height:1 
}
.main_about dl dd { font-weight:700; font-size:40px; line-height:1 }
.main_about dl dd small { 
    font-size:20px; margin:0 0 0 5px; display:inline-block; vertical-align:3px 
}

/* 메인 상품 */
.main_product { background:#f0f0f0; padding:80px 0 }
.main_product h2 { 
    text-align:center; line-height:1; font-size:34px; 
    font-weight:700; letter-spacing:-1px; margin:0 0 30px 
}
.main_product .tab_menu { text-align:center }
.main_product .tab_con { margin-top:40px }
.main_product .lt_more { display:none }
.main_product .prd_slider > div { width:calc(100%/4) !important }
.main_product .tab_menu p { 
    padding: 5px 25px; font-size: .9rem; border-left:1px solid #ccc; 
    border-right:1px solid #ccc; display: inline-block
}

.main_productt { background:#f0f0f0; padding:80px 0 }
.main_productt h2 { 
    text-align:center; line-height:1; font-size:34px; 
    font-weight:700; letter-spacing:-1px; margin:0 0 30px 
}
.main_productt .tab_menu { text-align:center }
.main_productt .tab_con { margin-top:40px }
.main_productt .lt_more { display:none }
.main_productt .prd_slider > div { width:calc(100%/4) !important }
.main_productt .tab_menu p { 
    padding: 5px 25px; font-size: .9rem; border-left:1px solid #ccc; 
    border-right:1px solid #ccc; display: inline-block
}

.pic_lt { position:relative; margin:0; padding:0 10px; background:transparent }
.pic_lt .touchslider { position:relative; overflow:hidden; min-height:302px !important }
.pic_lt li { padding:0; border:1px solid #ddd; background:#fff }
.pic_lt li:before { 
    content:""; box-shadow: 0 5px 16px 0 rgba(0, 0, 0, 0); 
    position:absolute; width:100%; height:100%; z-index:-1; transition:all .3s 
}
.pic_lt li:hover:before { box-shadow:0 5px 16px 0 rgba(0, 0, 0, 0.2) }
.pic_lt li .lt_img { position:relative; background:#ddd }
.pic_lt li .lt_img span { 
    position:absolute; left:50%; top:50%; line-height:1; 
    font-weight:500; color:#fff; background:none; 
    transform:translate(-50%); text-transform:uppercase; font-size:1.2em 
}
.pic_lt .lat_title { display:none }
.pic_lt .ts-controls button { 
    position:absolute; top:50%; margin-top:-29.5px; left:-80px; 
    background:url(../img/slide_left_b.png); width:30px; height:59px; 
    border:0; text-indent:-9000px; font-size:0 
}
.pic_lt .ts-controls button.ts-next { 
    left:auto; right:-80px; background:url(../img/slide_right_b.png) 
}
.pic_lt li .lt_name { 
    font-size:1.43em; font-weight:700 ; border-top:1px solid #e0e0e0; 
    padding:15px 18px; letter-spacing:-1px 
}
.pic_lt li .lt_name a { 
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 
    display:block; width:100% 
}
.pic_lt li .lt_img { margin:0; }
.pic_lt .lt_info { display:none }

/* 메인 게시판 */
.main_bbs { background:#fff; padding:80px 0 }
.main_bbs section { 
    float:left; width:calc(100%/2 - 26.7px); margin:0 20px; position:relative; 
}
.main_bbs section:first-child { margin-left:0 }
.main_bbs section:last-child { margin-right:0 }

.lat .lat_title { 
    font-size:1.4em; line-height:1; font-weight:600; margin:0 0 15px; min-height:19px 
}
.lat li { 
    position:relative; border-top:1px solid #e0e0e0; border-bottom:0; 
    margin:0; padding:10px 3px;  
}
.lat li .catg { 
    font-weight:400; font-size:.95em; color:#ba7c45; 
    vertical-align:1px; margin:0 3px 0 0 
}
.lat li:after { content:""; display:block; clear:both }
.lat li .f_left { width:calc(100% - 50px)}
.lat li:first-child { border-top:1px solid #666 }
.lat li a { font-weight:300; font-size:1.05em; width:calc(100% - 60px); }
.lat li a:hover { color:#3170bf }
.lat li .fa {
    display:inline-block;line-height:18px; height:18px;width:18px;color:#fff;
    background:#333;text-align:center;border-radius:2px;font-size:14px;
}
.lat li .qnaIco2 .fa { background:#2962d5; }
.lat li .qnaIco3 .fa { background:#ccc; }
.lt_info { float:right; width:50px; text-align:right; padding:0 }
.lt_info .lt_nick { display:none}
.lt_info .lt_date {color:#888}
.lat .lt_more { 
    position:absolute; top:0; right:0; text-indent:-9000px; 
    font-size:0; background:url(../img/btn_more_b.png) no-repeat center; 
    width:20px; height:20px; display:block 
}
.lat .lt_more:hover { transform:rotate(-90deg) }

/* 메인 갤러리 */
.main_gallery { position:relative; background:#fff; }
.main_gallery h2 { 
    text-align:center; line-height:1; font-size:34px; font-weight:700; 
    text-transform:uppercase; letter-spacing:-1px; margin:0 0 30px; 
    position:absolute; width:100%; top:80px; color:#fff; z-index:20; 
    text-shadow:0 0 10px rgba(0,0,0,0.2) 
}
.main_gallery .fotorama__nav-wrap, .main_gallery p.empty { 
    position:absolute; width:100%; top:150px; text-align:center 
}
.main_gallery .fotorama__nav__shaft { 
    background:#fff; border:3px solid #fff; border-top-width:1px; 
    border-bottom-width:1px 
}

.root_daum_roughmap { width:100% !important; border:0 !important; padding:0 !important }
.root_daum_roughmap .wrap_map { width:100%; height:440px !important }

/* 서브 비주얼 */
#sub_visual { 
    height:380px; position:relative; background-position:center; 
    background-size:cover; background-color:#000; 
}
#sub_visual h2 { 
    text-align:center; font-size:3.5em; color:#fff; padding:170px 0 0 0; 
    text-transform:uppercase; position:relative; line-height:1; 
    animation:up .5s .2s forwards; opacity:0; font-weight:600 
}
#sub_visual h2:after { 
    height:2px; width:60px; background:#fff; position:absolute; 
    left:50%; bottom:-20px; margin-left:-30px; content:""; 
    animation:scale .5s .5s forwards; opacity:0 
}

/* SNB */
#snb { border-bottom:1px solid #e4e4e4 }
#snb .depth1 { margin:0 0 0 1px }
#snb .depth1 > li { 
    width:calc(100%/3 + .9px); margin:0 0 0 -1px; float:left; 
    border:1px solid #e4e4e4; border-top:0; border-bottom:0; 
    height:60px; line-height:60px; font-weight:500; font-size:1.2em; 
    padding:0 20px; position:relative; color:#bbb; background:#f6f6f6 
}
#snb .depth1 > li > a { display:block; color:#bbb }
#snb .depth1 > li .arrow { position:absolute; right:20px; top:0; font-size:14px; }
#snb .depth1 > li .arrow.on { font-size:1.3em }
#snb .depth1 > li:nth-child(3) { color:#222; background:#fff; cursor:pointer }
#snb .depth1 > li.last { background:#fff; color:#222 }
#snb .depth1 ul { 
    position:absolute; width:calc(100% + 2px); background:#fff; 
    border:1px solid #ddd; left:-1px; z-index:20; display:none 
}
#snb .depth1 ul li a { 
    height:50px; line-height:50px; font-size:0.9em; color:#888; 
    padding-left:20px; font-weight:400; border-top:1px solid #e0e0e0; display:block 
}
#snb .depth1 ul li:hover a { background:#f6f6f6 }
#snb .depth1 ul li.on a { background:#f0f0f0; color:#222 }
#snb .depth1 ul li:first-child a { border:0 }

#contents { margin:65px 0 0 0 }
#contents p { word-break:keep-all }

.container_title { 
    font-size:2.8em; line-height:1; font-weight:700; margin:0 0 55px 0; 
    text-align:center; position:relative; padding-top:20px 
}
.container_title:before { 
    content:""; width:46px; height:3px; background:#222; 
    position:absolute; top:0; left:50%; margin-left:-23px 
}

/* 서브 비주얼 이미지 */
#sub_visual.sub10 { background-image:url(../img/sub01_top.png) }
#sub_visual.sub20 { background-image:url(../img/sub02_top.png) }
#sub_visual.sub30 { background-image:url(../img/sub03_top.png) }
#sub_visual.sub40 { background-image:url(../img/sub04_top.png) }
#sub_visual.sub50 { background-image:url(../img/sub05_top.png) }
#sub_visual.sub60 { background-image:url(../img/sub01_top.png) }
#sub_visual.sub70 { background-image:url(../img/sub01_top.png) }
#sub_visual.sub80 { background-image:url(../img/sub01_top.png) }
#sub_visual.sub90 { background-image:url(../img/sub01_top.png) }

/* 서브 페이지 */
#ctt { margin:0; padding:0 }
#ctt_con { padding:0; margin:0; line-height:1.5; font-size:1.16em }
#faq_wrap li { font-size:1.1em }
.video_area { position:relative; height:0; padding-top:56.25% }
.video_area iframe { width:100%; height:100%; position:absolute; left:0; top:0 }

#ctt_con h2.title { 
    font-size:1.5em; font-weight:700; line-height:1; padding:13px 0 30px; 
    letter-spacing:-1px; position:relative 
}
#ctt_con h2.title:before { 
    content:""; display:block; width:40px; height:3px; background:#222; 
    position:absolute; left:0; top:0 
}

#ctt_con.sub01_01 .sec01:after { clear:both; content:""; display:block }
#ctt_con.sub01_01 .sec01 > div { float:left; width:calc(100% - 450px) }
#ctt_con.sub01_01 .sec01 h2 { 
    font-size:2em; line-height:1.35; font-weight:300; 
    letter-spacing:-1px; margin:0 0 30px 
}
#ctt_con.sub01_01 .sec01 h2 strong { font-weight:700 }
#ctt_con.sub01_01 .sec01 h3 { 
    font-size:1.3em; margin:30px 0 5px 0; font-weight:700; letter-spacing:-1px 
}
#ctt_con.sub01_01 .sec01 p { margin:0 0 20px }
#ctt_con.sub01_01 .sec01 .img01 { float:right; width:400px }
#ctt_con.sub01_01 .sec01 .img01 p { 
    text-align:right; line-height:1; margin:18px 0 0 0 
}
#ctt_con.sub01_01 .sec01 .img01 p strong { font-size:1.2em }
#ctt_con.sub01_01 table { border-top:2px solid #666 }
#ctt_con.sub01_01 th, #ctt_con.sub01_01 td { 
    border-bottom:1px solid #e0e0e0; padding:12px; text-align:left 
}
#ctt_con.sub01_01 th { background:#f4f4f4; padding-left:20px; width:160px }

#ctt_con.sub01_02 { text-align:center }
#ctt_con.sub01_02 .tab_menu { text-align:center; margin:0 }
#ctt_con.sub01_02 .tab_menu ul { margin:0 }
#ctt_con.sub01_02 .tab_menu li { width:calc(100%/3) }
#ctt_con.sub01_02 .tab_menu a { 
    font-size:38px; font-weight:400; line-height:1; display:block; 
    padding:20px 0; font-family:Frank Ruhl Libre; border:0; 
    border-bottom:1px solid #eee  
}
#ctt_con.sub01_02 .tab_menu a:hover { color:#222; background:#fff }
#ctt_con.sub01_02 .tab_menu a small { 
    font-size:15px; display:block; text-align:center; margin:0 0 8px 0; 
    font-weight:400; color:#bbb; font-family:noto sans kr 
}
#ctt_con.sub01_02 .sec01:after { clear:both; content:""; display:block }
.history_list { }
.history_list > ul > li { width:47%; float:right; margin-top:60px }
.history_list > ul > li:nth-child(odd) { float:left }
.history_list li li { 
    margin:10px 0 0 0; line-height:1.3; background:url(../img/dot01.png) no-repeat 0 7px; 
    padding-left:12px; text-align:left 
}
.history_list li li span { font-weight:600; vertical-align:0; margin-right:3px }
.history_list h3 { font-size:2em; font-weight:400; font-family:Frank Ruhl Libre }
.history_list .img { margin:5px 0 0 0 }
.history_list .img img { border-radius:10px }
.history_list li ul { margin-top:20px }

#ctt_con.sub01_03 .os_mac.root_daum_roughmap { font-family:noto sans kr !important }
#ctt_con.sub01_03 .root_daum_roughmap .cont .section { margin:0 !important }

/* 게시물 선택복사 선택이동 */
#copymove {}
#copymove .win_desc { text-align:center; display:block }
#copymove .tbl_wrap { margin:20px }
#copymove .win_btn { padding:0 20px 20px }
.copymove_current { 
    float:right; background:#ff3061; padding:5px; color:#fff; border-radius:3px 
}
.copymove_currentbg { background:#f4f4f4 }

/* 화면낭독기 사용자용 */
#hd_login_msg { 
    position:absolute; top:0; left:0; font-size:0; line-height:0; overflow:hidden 
}
.msg_sound_only, .sound_only { 
    display:inline-block !important; position:absolute; top:0; left:0; 
    width:0; height:0; margin:0 !important; padding:0 !important; 
    font-size:0; line-height:0; border:0 !important; overflow:hidden !important 
}

/* 본문 바로가기 */
#skip_to_container a { 
    z-index:100000; position:absolute; top:0; left:0; width:1px; 
    height:1px; font-size:0; line-height:0; overflow:hidden 
}
#skip_to_container a:focus, #skip_to_container a:active { 
    width:100%; height:75px; background:#21272e; color:#fff; 
    font-size:2em; font-weight:bold; text-align:center; 
    text-decoration:none; line-height:3.3em 
}

/* ie6 이미지 너비 지정 */
.img_fix { width:100%; height:auto }

/* 캡챠 자동등록(입력)방지 기본 -pc */
#captcha { display:inline-block; position:relative }
#captcha legend { 
    position:absolute; margin:0; padding:0; font-size:0; 
    line-height:0; text-indent:-9999em; overflow:hidden 
}
#captcha #captcha_img { 
    height:40px; border:1px solid #898989; vertical-align:top; padding:0; margin:0 
}
#captcha #captcha_mp3 { 
    margin:0; padding:0; width:40px; height:40px; border:0; 
    background:transparent; vertical-align:middle; overflow:hidden; 
    cursor:pointer; background:url('../../../img/captcha2.png') no-repeat; 
    text-indent:-999px; border-radius:3px 
}
#captcha #captcha_reload { 
    margin:0; padding:0; width:40px; height:40px; border:0; 
    background:transparent; vertical-align:middle; overflow:hidden; 
    cursor:pointer; background:url('../../../img/captcha2.png') no-repeat 0 -40px; 
    text-indent:-999px; border-radius:3px 
}
#captcha #captcha_key { 
    margin:0 0 0 3px; padding:0 5px; width:90px; height:40px; 
    border:1px solid #ccc; background:#fff; font-size:1.333em; 
    font-weight:bold; text-align:center; border-radius:3px; vertical-align:top 
}
#captcha #captcha_info { 
    display:block; margin:5px 0 0; font-size:0.95em; letter-spacing:-0.1em 
}

/* 캡챠 자동등록(입력)방지 기본 - mobile */
#captcha.m_captcha audio { display:block; margin:0 0 5px; width:187px }
#captcha.m_captcha #captcha_img { 
    width:160px; height:60px; border:1px solid #e9e9e9; 
    margin-bottom:3px; margin-top:5px; display:block 
}
#captcha.m_captcha #captcha_reload { 
    position:static; margin:0; padding:0; width:40px; height:40px; 
    border:0; background:transparent; vertical-align:middle; 
    overflow:hidden; cursor:pointer; 
    background:url('../../../img/captcha2.png') no-repeat 0 -40px; text-indent:-999px 
}
#captcha.m_captcha #captcha_reload span { display:none }
#captcha.m_captcha #captcha_key { 
    margin:0; padding:0 5px; width:115px; height:29px; 
    border:1px solid #b8c9c2; background:#f7f7f7; font-size:1.333em; 
    font-weight:bold; text-align:center; line-height:29px; margin-left:3px 
}
#captcha.m_captcha #captcha_info { 
    display:block; margin:5px 0 0; font-size:0.95em; letter-spacing:-0.1em 
}
#captcha.m_captcha #captcha_mp3 { 
    width:31px; height:31px; 
    background:url('../../../img/captcha2.png') no-repeat 0 0 ; 
    vertical-align:top; overflow:hidden; cursor:pointer; 
    text-indent:-9999px; border:none 
}

/* ckeditor 단축키 */
.cke_sc { margin:0 0 5px; text-align:right }
.btn_cke_sc { 
    display:inline-block; padding:0 10px; height:23px; 
    border:1px solid #ccc; background:#fafafa; color:#000; 
    text-decoration:none; line-height:1.9em; vertical-align:middle; cursor:pointer 
}
.cke_sc_def { 
    margin:0 0 5px; padding:10px; border:1px solid #ccc; 
    background:#f7f7f7; text-align:center 
}
.cke_sc_def dl { margin:0 0 5px; text-align:left; zoom:1 }
.cke_sc_def dl:after { display:block; visibility:hidden; clear:both; content:"" }
.cke_sc_def dt, .cke_sc_def dd { 
    float:left; margin:0; padding:5px 0; border-bottom:1px solid #e9e9e9 
}
.cke_sc_def dt { width:20%; font-weight:bold }
.cke_sc_def dd { width:30% }

/* ckeditor 태그 기본값 */
#bo_v_con ul { 
    display:block; list-style-type:disc; margin-top:1em; 
    margin-bottom:1em; margin-left:0; margin-right:0; padding-left:40px 
}
#bo_v_con ol { 
    display:block; list-style-type:decimal; margin-top:1em; 
    margin-bottom:1em; margin-left:0; margin-right:0; padding-left:40px 
}
#bo_v_con li { display:list-item }

/* 기본테이블 */
.tbl_wrap table { 
    width:100%; border-collapse:collapse; border-spacing:0 5px; 
    background:#fff; border-top:1px solid #ececec; border-bottom:1px solid #ececec 
} 
.tbl_wrap caption { padding:10px 0; font-weight:bold; text-align:left }
.tbl_head01 { margin:0 0 10px }
.tbl_head01 caption { padding:0; font-size:0; line-height:0; overflow:hidden }
.tbl_head01 thead th { 
    padding:20px 0; font-weight:normal; text-align:center; 
    border-bottom:1px solid #ececec; height:40px 
}
.tbl_head01 thead th input { vertical-align:top } /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head01 tfoot th, .tbl_head01 tfoot td { 
    padding:10px 0; border-top:1px solid #c1d1d5; border-bottom:1px solid #c1d1d5; 
    background:#d7e0e2; text-align:center 
}
.tbl_head01 tbody th { padding:8px 0; border-bottom:1px solid #e8e8e8 }
.tbl_head01 td { 
    color:#666; padding:10px 5px; border-top:1px solid #ecf0f1; 
    border-bottom:1px solid #ecf0f1; line-height:1.4em; height:60px; word-break:break-all 
}
.tbl_head01 tbody tr:hover td { background:#fafafa }
.tbl_head01 a:hover { text-decoration:underline }

.tbl_head02 { margin:0 0 10px }
.tbl_head02 caption { padding:0; font-size:0; line-height:0; overflow:hidden }
.tbl_head02 thead th { 
    padding:5px 0; border-top:1px solid #d1dee2; border-bottom:1px solid #d1dee2; 
    background:#e5ecef; color:#383838; font-size:0.95em; text-align:center; 
    letter-spacing:-0.1em 
}
.tbl_head02 thead a { color:#383838 }
.tbl_head02 thead th input { vertical-align:top } /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head02 tfoot th, .tbl_head02 tfoot td { 
    padding:10px 0; border-top:1px solid #c1d1d5; border-bottom:1px solid #c1d1d5; 
    background:#d7e0e2; text-align:center 
}
.tbl_head02 tbody th { 
    padding:5px 0; border-top:1px solid #e9e9e9; border-bottom:1px solid #e9e9e9; 
    background:#fff 
}
.tbl_head02 td { 
    padding:5px 3px; border-top:1px solid #e9e9e9; border-bottom:1px solid #e9e9e9; 
    background:#fff; line-height:1.4em; word-break:break-all 
}
.tbl_head02 a {}

/* 폼 테이블 */
.tbl_frm01 { margin:0 0 20px }
.tbl_frm01 table { width:100%; border-collapse:collapse; border-spacing:0 }
.tbl_frm01 th { 
    width:70px; padding:7px 13px; border:1px solid #e9e9e9; 
    border-left:0; background:#f5f8f9; text-align:left 
}
.tbl_frm01 td { 
    padding:7px 10px; border-top:1px solid #e9e9e9; 
    border-bottom:1px solid #e9e9e9; background:transparent 
}
.wr_content textarea, .tbl_frm01 textarea, .form_01 textarea, .frm_input { 
    border:1px solid #d0d3db; background:#fff; color:#000; 
    vertical-align:middle; border-radius:3px; padding:5px;
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
}
.tbl_frm01 textarea { padding:2px 2px 3px }
.frm_input { height:40px }

.full_input { width:100% }
.half_input { width:49.5% }
.twopart_input { width:385px; margin-right:10px }
.tbl_frm01 textarea, .write_div textarea { width:100%; height:100px }
.tbl_frm01 a { text-decoration:none }
.tbl_frm01 .frm_file { display:block; margin-bottom:5px }
.tbl_frm01 .frm_info { display:block; padding:0 0 5px; line-height:1.4em }

/*기본 리스트*/
.list_01 ul { border-top:1px solid #ececec }
.list_01 li { 
    border-bottom:1px solid #ececec; background:#fff; 
    padding:10px 15px; list-style:none; position:relative 
}
.list_01 li:nth-child(odd) { background:#f6f6f6 }
.list_01 li:after { display:block; visibility:hidden; clear:both; content:"" }
.list_01 li:hover { background:#f9f9f9 }
.list_01 li.empty_li { text-align:center; padding:20px 0; color:#666 }

/*폼 리스트*/
.form_01 h2 { font-size:1.167em }
.form_01 li { margin-bottom:10px }
.form_01 ul:after, .form_01 li:after { display:block; visibility:hidden; clear:both; content:"" }
.form_01 .left_input { float:left }
.form_01 .margin_input { margin-right:1% }
.form_01 textarea { height:100px; width:100% }
.form_01 .frm_label { display:inline-block; width:130px }

/* 자료 없는 목록 */
.empty_table { padding:50px 0 !important; text-align:center }
.empty_list { padding:20px 0 !important; color:#666; text-align:center }

/* 필수입력 */
.required, textarea.required { 
    background-image:url('../img/require.png') !important; 
    background-repeat:no-repeat !important; 
    background-position:right top !important 
}

/* 테이블 항목별 정의 */
.td_board { width:80px; text-align:center }
.td_category { width:80px; text-align:center }
.td_chk { width:30px; text-align:center }
.td_date { width:60px; text-align:center }
.td_datetime { width:110px; text-align:center }
.td_group { width:80px; text-align:center }
.td_mb_id { width:100px; text-align:center }
.td_mng { width:80px; text-align:center }
.td_name { width:100px; text-align:left }
.td_nick { width:100px; text-align:center }
.td_num { width:50px; text-align:center }
.td_numbig { width:80px; text-align:center }
.td_stat { width:60px; text-align:center }

.txt_active { color:#5d910b }
.txt_done { color:#e8180c }
.txt_expired { color:#ccc }
.txt_rdy { color:#8abc2a }

/* 새창 기본 스타일 */
.new_win { position:relative }
.new_win .tbl_wrap { margin:0 20px }
.new_win #win_title { 
    font-size:1.3em; height:50px; line-height:30px; padding:10px 20px; 
    background:#fff; color:#000;
    -webkit-box-shadow:0 1px 10px rgba(0,0,0,.1);
    -moz-box-shadow:0 1px 10px rgba(0,0,0,.1);
    box-shadow:0 1px 10px rgba(0,0,0,.1);
}
.new_win #win_title .sv { font-size:0.75em; line-height:1.2em }
.new_win .win_ul { margin-bottom:15px; padding:0 20px }
.new_win .win_ul:after { display:block; visibility:hidden; clear:both; content:"" }
.new_win .win_ul li { 
    float:left; background:#fff; text-align:center; padding:0 10px; 
    border:1px solid #d6e9ff; border-radius:30px; margin-left:5px 
}
.new_win .win_ul li:first-child { margin-left:0 }
.new_win .win_ul li a { display:block; padding:8px 0; color:#6794d3 }
.new_win .win_ul .selected { 
    background:#3a8afd; border-color:#3a8afd; position:relative; z-index:5 
}
.new_win .win_ul .selected a { color:#fff; font-weight:bold }
.new_win .win_desc { 
    position:relative; margin:10px; border-radius:5px; font-size:1em; 
    background:#f2838f; color:#fff; line-height:50px; text-align:left; padding:0 20px 
}
.new_win .win_desc i { font-size:1.2em; vertical-align:baseline }
.new_win .win_desc:after { 
    content:""; position:absolute; left:0; top:0; width:4px; 
    height:50px; background:#da4453; border-radius:3px 0 0 3px 
}
.new_win .frm_info { font-size:0.92em; color:#919191 }
.new_win .win_total { 
    float:right; display:inline-block; line-height:30px; 
    font-weight:normal; font-size:0.75em; color:#3a8afd; 
    background:#f6f6f6; padding:0 10px; border-radius:5px 
}
.new_win .new_win_con { margin:20px 0; padding:20px }
.new_win .new_win_con:after { display:block; visibility:hidden; clear:both; content:"" }
.new_win .new_win_con2 { margin:20px 0 }
.new_win .btn_confirm:after { display:block; visibility:hidden; clear:both; content:"" }
.new_win .win_btn { text-align:center }
.new_win .btn_close { height:45px; width:60px; overflow:hidden; cursor:pointer }
.new_win .btn_submit { padding:0 20px; height:45px; font-weight:bold; font-size:1.083em }

/* 검색결과 색상 */
.sch_word { 
    color:#fff; background:#ff005a; padding:2px 5px 3px; 
    line-height:18px; margin:0 2px 
}

/* 자바스크립트 alert 대안 */
#validation_check { margin:100px auto; width:500px }
#validation_check h1 { margin-bottom:20px; font-size:1.3em }
#validation_check p { 
    margin-bottom:20px; padding:30px 20px; border:1px solid #e9e9e9; background:#fff 
}

/* 사이드뷰 */
.sv_wrap { position:relative; font-weight:normal }
.sv_wrap .sv { 
    z-index:1000; display:none; margin:5px 0 0; font-size:0.92em; 
    background:#333;
    -webkit-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
    -moz-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
    box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
}
.sv_wrap .sv:before { 
    content:""; position:absolute; top:-6px; left:15px; width:0; height:0; 
    border-style:solid; border-width:0 6px 6px 6px; 
    border-color:transparent transparent #333 transparent 
}
.sv_wrap .sv a { 
    display:inline-block; margin:0; padding:0 10px; line-height:30px; 
    width:100px; font-weight:normal; color:#bbb 
}
.sv_wrap .sv a:hover { background:#000; color:#fff }
.sv_member { color:#333 }
.sv_on { 
    display:block !important; position:absolute; top:23px; left:0px; 
    width:auto; height:auto 
}
.sv_nojs .sv { display:block }

/* 페이징 */
.pg_wrap { clear:both; float:left; display:inline-block }
.pg_wrap:after { display:block; visibility:hidden; clear:both; content:"" } 
.pg { text-align:center }
.pg_page, .pg_current { display:inline-block; vertical-align:middle; background:#eee; border:1px solid #eee }
.pg a:focus, .pg a:hover { text-decoration:none }
.pg_page { 
    color:#959595; font-size:1.083em; height:30px; line-height:28px; 
    padding:0 5px; min-width:30px; text-decoration:none; border-radius:3px 
}
.pg_page:hover { background-color:#fafafa }
.pg_start { 
    text-indent:-999px; overflow:hidden; 
    background:url('../img/btn_first.gif') no-repeat 50% 50% #eee; 
    padding:0; border:1px solid #eee 
}
.pg_prev { 
    text-indent:-999px; overflow:hidden; 
    background:url('../img/btn_prev.gif') no-repeat 50% 50% #eee; 
    padding:0; border:1px solid #eee 
}
.pg_end { 
    text-indent:-999px; overflow:hidden; 
    background:url('../img/btn_end.gif') no-repeat 50% 50% #eee; 
    padding:0; border:1px solid #eee 
}
.pg_next { 
    text-indent:-999px; overflow:hidden; 
    background:url('../img/btn_next.gif') no-repeat 50% 50% #eee; 
    padding:0; border:1px solid #eee 
}
.pg_start:hover, .pg_prev:hover, .pg_end:hover, .pg_next:hover { background-color:#fafafa }

.pg_current { 
    display:inline-block; background:#3a8afd; border:1px solid #3a8afd; 
    color:#fff; font-weight:bold; height:30px; line-height:30px; 
    padding:0 10px; min-width:30px; border-radius:3px 
}

/* cheditor 이슈 */
.cheditor-popup-window *, 
.cheditor-popup-window :after, 
.cheditor-popup-window :before {
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
}

/* Mobile화면으로 */
#device_change { 
    display:block; margin:0.3em; padding:0.5em 0; border:1px solid #eee; 
    border-radius:2em; background:#fff; color:#000; font-size:2em; 
    text-decoration:none; text-align:center 
}

/* 그누보드 수정 */
#bo_w #wr_2, #bo_w #wr_4, #bo_w #wr_6 { margin-left:1% }
#bo_list .td_name { width:150px; text-align:center }
#bo_list .td_datetime { width:120px }
.btn_bo_sch, .btn_more_opt { padding:0 10px; height:35px }
.tbl_head01 td, .tbl_head01 th { font-size:1.1em; padding:15px 10px !important; height:40px }
.bo_tit { font-weight:500 }
#bo_list .bo_tit .new_icon { 
    background:#f39800; color:#fff; font-size:0.7em; 
    font-weight:500; vertical-align:2px 
}
#bo_list .bo_tit .fa-lock { 
    background:#54585d; color:#fff; width:16px; height:16px; 
    font-size:14px; line-height:16px; border:0; vertical-align:1px 
}
.tbl_wrap table { border-top:2px solid #666 }
#bo_list .td_num2 { width:60px }
#bo_v_title .bo_v_tit { font-size:1.5em }
#bo_v_con { font-size:1.1em }
.bo_vc_w .btn_submit, .mbskin .btn_submit { font-weight:500 }
#bo_v .com_info dl:after { content:""; display:block; clear:both }
#bo_v .com_info dl {border-top:1px solid #e0e0e0 }
#bo_v .com_info dt, #bo_v .com_info dd { 
    float:left; border-bottom:1px solid #e0e0e0; line-height:34px; 
    height:36px; font-size:1.05em; padding-left:20px 
}
#bo_v .com_info dt { width:15%; font-weight:500; background:#f4f4f4; }
#bo_v .com_info dd { width:35%; font-weight:400 }
#bo_v .com_info dd.full { width:85% }
.btn_cke_sc { line-height:20px }
.btn_cke_sc_close { 
    background:#fff; border:1px solid #ddd; border-radius:3px; 
    padding:5px 15px 6px 15px 
}
#bo_list tbody tr:hover {border-left:0}
#bo_w .bo_w_tit #btn_autosave { top:3px; right:3px }
#bo_w .btn_cancel { color:#fff; font-weight:500 }
#fregister p { font-weight:500; background:#fff; color:#222; border:1px solid #ccc }
#fregister p:before { display:none }
.chk_li { padding-left:7px; display:inline-block; vertical-align:top; margin-top:-4px }
.chk_li + .tooltip_icon { vertical-align:top; margin-top:-8px}
.reg_btn_submit { color:#fff !important; font-weight:500 }
#sns_login .txt { font-weight:500 }
#bo_cate { font-size:0; margin-left:1px; text-align:center }
#bo_cate li { margin:0 0 0 -1px; padding:0 }
#bo_cate a { 
    font-size:.95rem; border-radius:0; margin:0; min-width:150px; 
    text-align:center; height:50px; line-height:46px; padding:0 20px; 
    border:1px solid #e0e0e0; color:#aaa; font-weight:400 
}
#bo_cate a:hover { background:#f4f4f4; color:#222 }
#bo_cate #bo_cate_on { 
    background:#fff; color:#222; border-color:#222; position:relative; 
    z-index:1; box-shadow:none; font-weight:500 
}
#bo_w #wr_2, #bo_w #wr_4, #bo_w #wr_6 { margin-left:0 }
#bo_v_act { margin:30px 0 50px 0 }
.btn_bo_user .btn_admin, .btn_cm_opt { padding:0 10px; color:inherit }
#bo_v_info .sv_member, #bo_v_info .sv_guest, #bo_v_info .member, 
#bo_v_info .guest ,#bo_vc .member, #bo_vc .guest, #bo_vc .sv_member, #bo_vc .sv_guest{ 
    font-weight:500; font-size:1.1em; margin:0 0 5px; display:inline-block 
}
.bo_tit .cnt_cmt { 
    font-size:10px !important; font-family:arial; background:none !important; 
    color:#999 !important; font-weight:normal !important 
}
.all_chk.chk_box input[type="checkbox"] + label span { top:3px }
#bo_v_desc { font-size:1.1em }
.new_win .btn_submit, .new_win .btn_close { font-weight:500; font-size:1em }
.new_win .win_desc { 
    border:1px solid #666; background:#fff; color:#222; 
    font-weight:500; text-align:center 
}
.new_win .win_desc:after { display:none }
.gall_row .box_clear { clear:none }
#bo_v_act { margin:60px 0 !important }
#bo_v_share { text-align:center; padding:40px 0 }
#bo_v_sns { text-align:center; float:none; display:inline-block }
#bo_v_sns li { width:auto; float:none; display:inline-block; text-align:center }
#bo_v_sns li a { 
    width:60px; height:60px; line-height:60px; border-radius:50%; 
    padding:0; text-align:center; display:inline-block !important 
}
#bo_v_sns li img { margin:0 }
#bo_v_sns li span { display:none }
#bo_v_share .btn { 
    width:60px; height:60px; line-height:1.2; border-radius:50%; 
    font-size:12px; padding:0; text-align:center; display:inline-block 
}
#bo_v_share .btn i { display:block; font-size:1.5em; margin:10px 0 3px }
#faq_sch .btn_submit { font-weight:500 }
#faq_sch { margin-bottom:30px }
.cmt_btn span.total { font-weight:400; font-size:0.9em; color:#999 }
.cmt_btn span.total b { font-size:1.5em }
.more_opt li button, .more_opt li a { font-weight:500 }
.bo_notice td { background:#f3f6f7 !important; border-bottom: 1px solid #ecf0f1; }
.bo_notice .notice_icon { color:#457088 }
#bo_v_img, #bo_v_img .fotorama__wrap { overflow:hidden }
.fotorama__wrap--css3 .fotorama__html, .fotorama__wrap--css3 .fotorama__stage .fotorama__img { 
    transition-property:opacity; transition-timing-function:linear; 
    transition-duration: 1ms; //previous value = 0.3s 
}
#sch_res_detail { margin:0 0 20px }
#sch_res_detail .sch_wr { width:calc(100% - 480px) }
#sch_res_detail .frm_input { width:calc(100% - 93px) }
#sch_res_ov { background:#fff; border:1px solid #ddd; margin:0 0 20px }
#sch_res_ov h2 strong { color:#d43434 }
#sch_res_board { font-size:0; margin-left:1px; text-align:center }
#sch_res_board li { margin:0 0 0 -1px; padding:0 }
#sch_res_board a { 
    font-size:.95rem; border-radius:0; margin:0; min-width:150px; 
    text-align:center; height:50px; line-height:46px; padding:0 20px; 
    border:1px solid #e0e0e0; color:#aaa; font-weight:400 
}
#sch_res_board a:hover { background:#f4f4f4; color:#222 }
#sch_res_board .sch_on { 
    background:#fff; color:#222; border-color:#222; position:relative; 
    z-index:1; box-shadow:none; font-weight:500 
}
.sch_word { background:#eee; color:#222 }
.sch_res_list h2 { margin:25px 0 12px 0 }
.sch_more { display:none }

.new_win #win_title { 
    text-align:center; border-bottom:1px solid #ccc; 
    padding:0 20px; line-height:46px; height:48px 
}
.new_win .new_win_con { margin-top:10px }

ul.faq_list_board { font-size:1em }

/* 반응형 스타일 - 1280px 이하 */
@media (max-width:1280px) {
    body { font-size:0.8em }
    .wrap { width:100%; padding:0 20px }
    #header .gnb .depth1 { padding:0 25px; }
    #header .gnb .depth1 > a:before { left:30px }
    #header.down { height:80px }
    #header .btn_user { margin-right:20px }
    #header .user { right:5px }
    #main_visual .latest { margin-left:0; left:4%; bottom:10px }
    .pic_lt .ts-controls { text-align:center; margin-top:10px; display:none; }
    .pic_lt .ts-controls button { display:none }
    .pic_lt .ts-controls button { 
        display:inline-block; margin:0 3px; position:static; 
        width:100%; background:none; width:20px; height:20px; 
        border:1px solid #333; border-radius:50% 
    }
    .pic_lt .ts-controls button { background:#333 }
    .main_about {padding:80px 0 }
    .main_about .img { width:50% }
    .main_about .img img:first-child { width:83% }
    .main_about .img img:last-child { width:50%; top:55%; left:45%; right:0 }
    .main_about .text { width:45% }
    .main_about .text h2 { font-size:70px; margin-bottom:35px }
    .main_about .text h3 { font-size:22px; margin-bottom:25px }
    .main_about .text p { font-size:16px; margin:0 0 23px }
    .main_about .btn_area a { 
        width:100%; height:50px; line-height:48px; 
        font-size:15px; margin-top:5px 
    }
    .main_about dl dt { font-size:20px; margin:40px 0 10px 0 }
    .main_about dl dd { font-size:28px }
    .main_product, .main_bbs { padding:60px 0 }
    .main_product h2, .main_gallery h2 { font-size:30px }
    .main_gallery h2 { top:60px }
    .main_gallery .fotorama__nav-wrap { top:120px }
    #footer { margin:60px 0 0 0; padding:40px 0 }
    #footer .f_left { margin-left:45px }
    #footer nav { right:20px }
    #snb .wrap { padding:0 }
    #snb li:first-child { border-left:0 }
    #snb li:last-child { border-right:0 }
    #contents { margin:55px 0 0 0 }
    .container_title { font-size:2.4em; margin:0 0 40px }
    .history_list { padding:0 4% }
    .tbl_head01 td, .tbl_head01 th { padding:12px 7px !important }
    #bo_list .td_num2 { width:50px }
    .td_thumb { width:150px }
    #bo_list .td_datetime { width:80px }
    #bo_gall .gall_info .gall_view { display:none }
    #faq_sch .frm_input, #faq_sch .btn_submit { height:40px }
    #bo_v iframe { width: 100%; height:43vw }
    #sch_res_detail select, #sch_res_detail select { width:120px }
    #sch_res_detail .sch_wr { width:calc(100% - 380px) }
}

/* 반응형 스타일 - 1023px 이하 */
@media (max-width:1023px) {
    body { font-size:0.8em }
    .wrap { width:100%; padding:0 4% }
    .mobile_only { display:block !important }
    .mobile_no { display:none !important }

    #header { height:90px !important }
    #header h1 { line-height:88px }
    #header .btn_user { 
        position:absolute; right:70px; top:25px; font-size:22px; 
        z-index:8; float:none; margin:0 
    }
    #header .btn_gnb { 
        position:absolute; right:30px; top:25px; font-size:22px; z-index:10; 
    }
    #header .btn_gnb.on { color:#fff; transform:rotate(-90deg) }
    #header .btn_search { 
        position:absolute; right:105px; top:25px; font-size:22px; 
        z-index:8; float:none; margin:0 
    }
    #header .gnb { 
        position:fixed; width:250px; background:#376da4; height:100%; 
        top:0; right:-250px; margin:0; float:none; z-index:9; 
        padding-top:60px; transition:all .3s 
    }
    #header .gnb.on { right:0; }
    #header.down .gnb a { color: #fff }
    #header.down .gnb .depth1 > a { margin-bottom:0 }
    #header.down .gnb .depth1:hover > a { color:#fff }
    #header .gnb .depth1 ul { 
        display:none; height:0; transition:all .3s; 
        background:rgba(0,0,0,0.3); margin:0 -25px; padding:10px 0 10px 30px 
    }
    #header .gnb .depth1.on ul { display:block; height:auto }
    #header .gnb .depth1 > a:before { display:none }
    #header .gnb .depth1 { padding:0 25px; float:none }
    #header .gnb .depth1 > a { height:50px; line-height:50px; display:block }
    #header .gnb .depth1 i { 
        position:absolute; top:0; right:0; width:60px; height:50px; 
        line-height:50px; text-align:center; z-index:2; padding-right:10px 
    }
    #header .gnb .depth2 > a { padding:10px 0 }
    #header .sns { float:none; text-align:center; margin:30px 0 0 0 }
    #header .sns li { float:none; display:inline-block; margin:0 10px }

    #header .user { right:38px; top:70px }
    #header .user.on a { color:rgba(0,0,0,0.7) }

    #header.on { background:#fff }
    #header.on .gnb { margin:0 }
    #header.on .gnb a { color:#fff }
    #header.on .btn_user, #header.on .btn_search { margin-top:0 }

    #footer { padding:30px 0 }
    #footer h1 { display:none }
    #footer .f_left { float:none !important; margin:0; }
    #footer nav { position:static; margin:0 0 10px }
    #footer nav li { margin:0 17px 0 0 }

    #main_visual .slider h2 { padding:0 10%; margin:22vh 0 0 0 }
    #main_visual .slider p { padding:0 10%; word-break:keep-all }
    #main_visual .bx-controls { bottom:50px }
    #main_visual .latest { width:300px }
    #main_visual .youtube-background { display:none }

    .main_about .img { width:40% }
    .main_about .img img { position:static !important }
    .main_about .img img:first-child { width:100% }
    .main_about .img img:last-child { width:100% }
    .main_about .text { width:55% }
    .main_about .text h2 { margin-left:0 }
    .main_about .text h2 { font-size:60px }
    .main_about .text h3 { font-size:20px }
    .main_about dl dt { font-size:18px; margin-top:28px }
    .main_about dl dd small { font-size:16px }
    .main_bbs section { margin:0 10px; width:calc(100%/2 - 13.4px) }
    .main_product h2, .main_gallery h2 { font-size:26px }
    .main_gallery { background:#f0f0f0; padding:60px 0 0 0 }
    .main_gallery h2 { position:static; color:#222; text-shadow:none }
    .main_gallery .fotorama__nav-wrap { position:static; padding:5px 0 }
    .main_gallery .fotorama__nav__shaft { border:0; background:transparent }

    #sub_visual { height:300px }
    #sub_visual h2 { padding-top:130px }

    #contents { margin:50px 0 0 0; min-height:400px }
    #contents .wrap { padding:0 3% }

    #ctt_con { font-size:1.12em }

    #ctt_con.sub01_01 .sec01 .img01 { width:35% }
    #ctt_con.sub01_01 .sec01 > div { width:60% }
    #ctt_con.sub01_02 .tab_menu a { font-size:30px }
    .history_list { padding:0 }
    .history_list > ul > li { width:48.5%; margin-top:40px }

    #bo_gall .gall_li { width:calc(100%/3 - 10.1px) }
    #bo_gall .gall_li:nth-child(4n + 1) { clear:none }
    #bo_gall .gall_li:nth-child(3n + 1) { clear:none }
    #bo_gall .gall_img:hover img { transform:none }
    #bo_gall.listtype .gall_img + div { padding:15px 30px }
    #bo_gall.listtype .bo_tit { font-size:1.6em }
    #bo_gall .gall_list_con { max-height:38px; overflow:hidden; margin-top:5px }

    #bo_v_act { margin:40px 0 !important }
    #bo_v_desc { margin-top:40px }
    .bo_v_nb { margin: 30px 0 }
    #bo_vc_empty { padding:40px 0 !important }
    #bo_v_con { min-height:50px }
    #bo_v_info .sv_member, #bo_v_info .sv_guest, #bo_v_info .member, 
    #bo_v_info .guest, #bo_vc .member, #bo_vc .guest, #bo_vc .sv_member, #bo_vc .sv_guest { 
        font-size:1.2em 
    }
    #bo_list .td_datetime { width:60px }
    #bo_list .td_name { width:90px }
    #captcha.m_captcha #captcha_key { height:40px; margin-top:5px }
    #captcha.m_captcha #captcha_img { display:inline-block; width:120px; height:40px; }
    #captcha.m_captcha #captcha_reload { margin-top:5px }
    td .thumb { width:150px }
    td .thumb ~ div { margin-left:170px }
    #bo_v iframe { width: 100%; height:52vw }
    #sch_res_board a { 
        min-width:0; padding:0; height:auto; line-height:1; 
        margin:3px 10px; border:0; font-size:13px 
    }
    #sch_res_board .sch_on { border:0 }
    .bo_v_nb li a { 
        overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 
        display:inline-block; width:calc(100% - 120px); vertical-align:top 
    }
}

/* 반응형 스타일 - 767px 이하 (모바일) */
@media (max-width:767px) {
    .s_mobile_only { display:block !important }

    #header { height:70px !important }
    #header h1 { line-height:68px }
    #header h1 a { width:200px; height:34px }
    #header .btn_gnb { top:16px;  }
    #header .btn_user { top:16px; }
    #header .user { top:58px }
    #header.on h1 { line-height:68px }
    #header.on h1 a { background-position:0 -36px }
    #header .btn_search { top:16px }
    .hd_sch_wr .box { width:96% }
    #footer { margin:40px 0 0 0; padding:25px 0 }
    #footer nav li { display:inline-block; float:none; margin-bottom:5px }
    #footer .copyright { font-size:0.9em; margin-top:15px }
    #footer #top_btn { right:10px; bottom:10px }

    #main_visual { height:auto }
    #main_visual .bx-wrapper { height:560px }
    #main_visual .slider h2 { font-size:2.4em }
    #main_visual .slider p { font-size:1.3em; margin:17px 0 0 0 }
    #main_visual .bx-controls { bottom:auto; top:490px }

    #main_visual .latest { 
        position:static; background:#333; width:100%; padding:20px 25px 10px 25px 
    }
    #main_visual .latest header h2 { font-size:24px }
    #main_visual .latest header a { width:20px; height:20px }
    #main_visual .latest header:after { width:30px; margin:10px 0 }
    #main_visual .latest .con p.subj { font-size:17px; margin-bottom:5px }
    #main_visual .latest .con p { font-size:14px; margin-bottom:5px }
    #main_visual .latest .con p.date { font-size:18px }
    #main_visual .latest .con a { 
        margin:5px 0 20px; height:32px; line-height:30px; font-size:1.1em 
    }

    .main_about { padding:40px 0 }
    .main_about .img { display:none }
    .main_about .text { width:100%; float:none; padding:0 3% }
    .main_about .text h2 { font-size:40px; margin:0 0 20px }
    .main_about .text h3 { font-size:16px; margin:0 0 15px }
    .main_about .text p { font-size:14px; margin:0 0 15px }
    .main_about .text .btn_area { text-align:center }
    .main_about dl dt { font-size:16px }
    .main_about dl dd { font-size:26px }
    .main_about dl dd small { font-size:12px; font-weight:500 }
    .main_product, .main_bbs { padding:40px 0 }
    .main_product h2 { margin:0 0 20px; font-size:1.6em }
    .main_product .tab_menu li a { background:transparent }
    .main_product .tab_con { margin-top:20px }
    .main_product .pic_lt .ts-controls { text-align:center; display:none; }
    .pic_lt .ts-controls button.ts-paging-btn { margin:3px }

    .main_gallery { padding-top:40px }
    .main_gallery h2 { font-size:1.6em; padding:0; margin:0 0 20px }
    .tab_menu li a { padding:0; margin:0 10px; border:0 }
    .main_gallery .tab_con { margin-top:30px }
    .pic_lt li .lt_name { font-size:1.3em }
    .main_bbs { padding:0 0 25px }
    .main_bbs .wrap { padding:0 }
    .main_bbs section { 
        width:100%; margin:25px 0 0 0; border-top:0px solid #e0e0e0; 
        padding:0 20px; padding-top:25px 
    }
    .main_bbs section:first-child { margin:0; border:0; }
    .main_bbs .lat .lt_more { right:20px; top:20px }

    .root_daum_roughmap .wrap_map { height:250px !important }

    #sub_visual { height:240px }
    #sub_visual h2 { font-size:2.2em; padding-top:100px }
    #sub_visual h2:after { bottom:-15px }

    #snb .depth1 > li { width:calc(50% + 1px) }
    #snb .depth1 > li:first-child { display:none; }
    #snb .depth1 > li:nth-child(2) { border-left:0 }

    #contents { min-height:300px; margin:40px 0 0 0 }
    .container_title { font-size:2em; padding-top:15px; margin:0 0 30px }
    .container_title:before { width:35px; height:2px; margin-left:-17.5px }

    #right_area { padding-top:30px }

    #bo_cate { margin-top:0 }
    #bo_cate a { 
        min-width:0; padding:0; height:auto; line-height:1; 
        margin:3px 10px; border:0; font-size:13px 
    }
    #bo_cate #bo_cate_on { border:0 }
    #bo_gall #gall_ul { margin:10px 0 0 0; }
    #bo_gall .gall_li { width:100%; float:none; margin-left:0; margin-bottom:15px }
    #bo_gall .bo_tit { white-space:normal }
    #bo_v_item #bo_v_img { float:none; width:100%; margin-top:5px }
    #bo_v_item #bo_v_summary { float:none; width:100%; margin:30px 0 0 0 }
    #bo_v_summary .bo_v_title { font-size:1.5em }
    #bo_v_summary .bo_v_title small { font-size:0.6em }
    #bo_v_summary, #bo_v_desc { font-size:1em }
    #bo_v_summary .refer { margin:12px 0 0 0 }
    #bo_v_sns li a { width:50px; height:50px; line-height:50px }
    #bo_v_share .btn { width:50px; height:50px; font-size:11px }
    #bo_v_share .btn i { margin:8px 0 0 0 }
    #bo_v_share { padding:25px 0 }
    .bo_v_nb { margin:20px 0 }
    #bo_v_desc { margin-top:30px }
    .bo_vc_w_info .frm_input { width:49.5%; margin:0 }
    .bo_vc_w_info #wr_password { float:right }
    #bo_vc article .pf_img { display:none }
    #bo_v_info .sv_member, #bo_v_info .sv_guest, #bo_v_info .member, 
    #bo_v_info .guest, #bo_vc .member, #bo_vc .guest, #bo_vc .sv_member, #bo_vc .sv_guest { 
        font-size:1.1em 
    }
    #bo_gall.listtype .gall_img { float:none; width:100% }
    #bo_gall.listtype .gall_img + div { 
        float:none; width:100%; padding:20px; font-size:1em 
    }
    #bo_gall .bo_tit, #bo_gall.listtype .bo_tit { font-size:1.3em }
    .gall_list_opt dt { min-width:60px; text-align:center }
    .gall_list_opt dt, .gall_list_opt dd { font-size:.95em }
    td .thumb { width:100%; float:none }
    td .thumb ~ div { margin-left:0; margin-top:15px }
    #bo_v_title { font-size:1.3em; font-weight:500 }
    #bo_v_title .bo_v_tit { font-size:0.9em!important; }
    #bo_v_act { margin:30px 0 !important }
    .bo_v_nb li .nb_tit { 
        padding-right:0; width:65px; vertical-align:top 
    }
.tbl_head01 td, .tbl_head01 th { font-size:1.05em }
#faq_sch .btn_submit { width:70px; }
#faq_sch .frm_input { width:calc(100% - 75px) }
#faq_sch .frm_input, #faq_sch .btn_submit { height:36px; font-size:1em }
#faq_sch { padding:20px; }
#faq_wrap li { font-size:1em }
#bo_v_con { font-size:1em }
#bo_list .td_stat, #bo_v_rel .td_stat { width:80px }
#bo_list .txt_rdy, #bo_v_rel .txt_rdy { padding:0 5px }
#bo_list .td_date { width:70px }
.bo_cate_link { float:none; display:block }
#bo_v_title .bo_v_cate { display:block; font-size:0.7em }
.bo_v_com > li { margin-left:0 }
.bo_sch { width:320px; margin-left:-160px }
.bo_sch .sch_input { width:240px }
#sch_res_detail { padding:15px }
#sch_res_detail select, #sch_res_detail select { width:49.4% }
#sch_res_detail .sch_wr { width:100%; margin:5px 0 0 0 }
.switch_field { padding-bottom:0 }
#sch_res_ov h2 { display:none }
#sch_res_ov ul { float:none }
.sch_res_list { font-size:.9em }
#bo_gall .gall_list_con { max-height:none; margin-top:10px }
#bo_v_info { margin:0 0 25px }
#bo_v_con { margin-top:0 }
#bo_v { font-size:1.05em }
#bo_list .txt_done, #bo_v_rel .txt_done { font-size:0.9em; padding:0 6px }
#bo_list .td_stat, #bo_v_rel .td_stat { width:70px }
.ctt_admin { font-size:13px }
input.hasDatepicker { width:150px; padding-right:0 !important }
#bo_v_ans h2 { font-size:1.3em }

ul.faq_list_board { font-size:1em }

.mbskin .mbskin_box { width:320px }
#mb_login #sns_login .txt { padding-left:0 !important }
#fregister p { padding:10px; line-height:1.3; font-size:1em; height:auto }
#sns_register h2 { display:none }
#sns_register .sns-wrap { width:100%; display:block; text-align:center }
#fregister h2 { font-size:1.1em }

#ctt_con { font-size:1em; overflow:hidden }
#ctt_con.sub01_01 .sec01 > div { float:none; width:100% }
#ctt_con.sub01_01 .sec01 h2 { font-size:1.5em }
#ctt_con.sub01_01 .sec01 .img01 { width:100%; float:none }
#ctt_con.sub01_01 .sec01 .img01 p { text-align:center }
#ctt_con h2.title { font-size:1.4em; padding-bottom:20px }
#ctt_con.sub01_01 th { width:auto }
#ctt_con.sub01_01 th, #ctt_con.sub01_01 td { padding:12px 7px; word-break:keep-all }
#ctt_con.sub01_02 .tab_menu a { font-size:16px; border:1px solid #e0e0e0; border-left:0; border-right:0; padding:10px 0; margin:0 }
#ctt_con.sub01_02 .tab_menu li.on a { border-color:#666 }
#ctt_con.sub01_02 .tab_menu { margin:0 0 30px }

#ctt_con.sub01_02 .tab_menu { margin:0 }
#ctt_con.sub01_02 .tab_menu a small { display:none }
.history_list h3 { font-size:1.9em }
.history_list li li { background-size:4px 4px; background-position:0 5px; padding-left:10px }
.history_list > ul > li { width:100%; margin-top:30px }
.os_mac.root_daum_roughmap .section_address .tit, .os_mac.root_daum_roughmap .section_address .txt { font-size:1em !important }

#hd_pop { width:100% }
.hd_pops { width:100% !important; left:0 !important; top:3vw !important }
.hd_pops_con { width:100% !important; height:auto !important; min-height:100px }

}
        /* 가로 스크롤 컨테이너 */
        .portfolio-container {
          position: relative;
          width: 100%;
          overflow: hidden;
          background: #f5f5f5;
          border-radius: 10px;
        }

        /* 가로 스크롤 래퍼 */
        .portfolio-grid {
          display: flex;
          gap: 20px;
          padding: 20px;
          overflow-x: auto;
          scroll-behavior: smooth;
          scrollbar-width: none; /* Firefox */
          -ms-overflow-style: none; /* IE/Edge */
        }

        /* 크롬/사파리 스크롤바 숨기기 */
        .portfolio-grid::-webkit-scrollbar {
          display: none;
        }

        /* 아이템 박스 */
        .portfolio-item {
          position: relative;
          min-width: 350px; /* 최소 너비 고정 */
          width: 350px;
          aspect-ratio: 1 / 1; /* 정사각형 비율 */
          overflow: hidden;
          border-radius: 10px;
          cursor: pointer;
          flex-shrink: 0; /* 아이템이 줄어들지 않도록 */
          box-shadow: 0 2px 8px rgba(0,0,0,0.1);
          transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        /* 아이템 호버 효과 */
        .portfolio-item:hover {
          transform: translateY(-5px);
          box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }

        /* 이미지 기본 */
        .portfolio-item img {
          width: 100%;
          height: auto;
          display: block;
          transform: translateY(0);
          transition: transform 2s linear;
        }

        /* 호버 시 이미지 위→아래 스크롤 */
        .portfolio-item:hover img {
          transform: translateY(-300px);
        }

        /* 오버레이 (처음에는 안 보이도록) */
        .overlay {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 100%;
          height: 100%;  
          transform: translate(-50%, -50%);
          background: rgba(0, 0, 0, 0.7);
          color: #fff;
          padding: 20px;
          border-radius: 10px;
          text-align: center;
          font-size: 1.5em;
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          visibility: hidden; /* 완전히 숨김 */
          transition: all 0.4s ease-in-out;
          pointer-events: none; /* 기본적으로 클릭 방지 */
        }

        /* 클릭 시 오버레이 보이게 (JavaScript로 추가될 클래스) */
        .portfolio-item.active .overlay {
          opacity: 1;
          visibility: visible;
          pointer-events: auto; /* 링크 클릭 가능하게 */
        }

        /* 호버 효과는 제거하거나 약하게 */
        .portfolio-item:hover .overlay {
          opacity: 1; /* 살짝만 보이게 (미리보기 효과) */
        }

        /* 오버레이 내부 링크 스타일 */
        .overlay a {
          color: #fff;
          text-decoration: none;
          transition: all 0.3s ease;
          display: inline-block;
        }

        .overlay a:hover {
          color: #FAE100;
        }

        /* 네비게이션 버튼 */
        .nav-button {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          background: rgba(255, 255, 255, 0.9);
          border: none;
          border-radius: 50%;
          width: 50px;
          height: 50px;
          cursor: pointer;
          font-size: 20px;
          font-weight: bold;
          color: #333;
          box-shadow: 0 2px 10px rgba(0,0,0,0.1);
          transition: all 0.3s ease;
          z-index: 100; /* z-index 높임 */
          pointer-events: auto; /* 클릭 가능하도록 명시 */
        }

        .nav-button:hover {
          background: #fff;
          box-shadow: 0 4px 15px rgba(0,0,0,0.2);
          transform: translateY(-50%) scale(1.1);
        }

        .nav-button:active {
          transform: translateY(-50%) scale(0.95); /* 클릭 피드백 */
        }

        .nav-prev {
          left: 10px;
        }

        .nav-next {
          right: 10px;
        }

        /* 스크롤 인디케이터 */
        .scroll-indicator {
          display: flex;
          justify-content: center;
          gap: 8px;
          padding: 0px 0;
          margin-top: 0px;
        }


        .indicator-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #ddd;
          cursor: pointer;
          transition: background 0.3s ease;
        }

        .indicator-dot.active {
          background: #007bff;
        }

        /* 섹션 타이틀 */
        .section-title {
            text-align: center;
            margin-top: 0px;
            padding: 20px;
        }

        .section-title h2 {
            font-size: 2.5rem;
            font-weight: bold;
            color: #fff;
            margin: 0;
        }
        .section-title span {
            font-size: 0.8rem;
            color: #fff;
			font-weight:lighter;
            margin: 0;

        }		

        /* 반응형 */
        @media (max-width: 768px) {
          .portfolio-item {
            min-width: 220px;
            width: 220px;
          }
          
          .portfolio-grid {
            gap: 15px;
            padding: 15px;
          }
          
          .nav-button {
            width: 40px;
            height: 40px;
            font-size: 16px;
          }
          
          .section-title h2 {
            font-size: 2rem;
          }
        }

        @media (max-width: 480px) {
          .portfolio-item {
            min-width: 180px;
            width: 180px;
          }
          
          .portfolio-grid {
            gap: 10px;
            padding: 10px;
          }
          
          .overlay {
            font-size: 1em;
            padding: 15px;
          }
          
          .section-title h2 {
            font-size: 1.5rem;
          }
        }
/* 모달 스타일 - 상하 여백 추가 */
        .modal {
            display: none;
            position: fixed;
            z-index: 9999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.8);
            padding: 60px 20px; /* 상하 60px, 좌우 20px 여백 */
            box-sizing: border-box;
        }

        .modal-box {
            position: relative;
            width: 100%;
            height: 100%;
            background: #fff;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 10px 50px rgba(0,0,0,0.5);
            max-width: 1200px;
            margin: 0 auto;
        }

        /* 모달 헤더 영역 */
        .modal-header {
            position: relative;
            background: #fff;
            padding: 15px 30px;

            flex-shrink: 0;
        }

        /* 닫기 버튼 */
        .close {
            position: absolute;
            top: 5px;
            right: 30px;
            color: #ff0000;
            font-size: 1em;
            font-weight: bold;
            cursor: pointer;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.3s ease;
        }


        /* 이미지 컨테이너 - 스크롤 영역 */
        .modal-content {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            /* 스크롤바 커스터마이징 */
            scrollbar-width: thin;
            scrollbar-color: #ccc #f1f1f1;
        }

        .modal-content::-webkit-scrollbar {
            width: 8px;
        }

        .modal-content::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }

        .modal-content::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 4px;
        }

        .modal-content::-webkit-scrollbar-thumb:hover {
            background: #999;
        }

        .modal-content img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }

        /* 반응형 대응 */
        @media (max-width: 768px) {
            .modal {
                padding: 40px 10px;
            }
            
            .modal-header {
                padding: 20px 15px;
            }
            
            .close {
                top: 10px;
                right: 25px;
                font-size: 1em;
            }
            
            .modal-content {
                padding: 15px;
            }
        }
/* 모달 기본 숨김 */
#imageModal {
  display: none;
  position: fixed;
  top:0; left:0; width:100%; height:100%;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
}