@charset 'utf-8';

/**************************************************
* common.css
*
* 1 - common (padding, margin etc...)
* 2 - UI (form, paging etc...)
* 3 - layout(intro, header, footer etc...)
**************************************************/
* { -webkit-tap-highlight-color:transparent; }
html, body { font-size:16px; font-weight:400; line-height:1.5; font-family:'KoPubWorldDotum', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; color:#5a3716; overflow-x:hidden; word-break:keep-all; }
body { -webkit-font-smoothing:subpixel-antialiased; -webkit-touch-callout:none; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; }
::-webkit-scrollbar {
    display:none; /* Chrome, Safari, Opera*/
}
h1, h2, h3, h4, h5, h6 { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; }
em, i, address { font-style:normal; }

.notosans *, .notosans { font-family:'Noto Sans KR', sans-serif; }
.notoserif *, .notoserif { font-family:'Noto Serif KR', serif; }
.kopubdotum *, .kopubdotum { font-family:'KoPubWorldDotum', serif; }
.kopubbatang *, .kopubbatang { font-family:'KoPubWorldBatang', serif; }
.poppins *, .poppins { font-family:'Poppins', sans-serif; }

img { image-rendering:-webkit-optimize-contrast; }
.img-thumb { position:relative; display:inline-block; background:no-repeat 50% 50% / cover; }
.img-fluid { position:relative; width:100%; max-width:100%; }

.font-weight-bold { font-weight:600 !important; }
.font-weight-black { font-weight:900 !important; }

/**************************************************
* padding
**************************************************/
.pb_0 { padding-bottom:0px; }
.pb_5 { padding-bottom:5px; }
.pb_10 { padding-bottom:10px; }
.pb_15 { padding-bottom:15px; }
.pb_20 { padding-bottom:20px; }
.pb_25 { padding-bottom:25px; }
.pb_30 { padding-bottom:30px; }
.pb_35 { padding-bottom:35px; }
.pb_40 { padding-bottom:40px; }
.pb_45 { padding-bottom:45px; }
.pb_50 { padding-bottom:50px; }

.pt_0 { padding-top:0px; }
.pt_5 { padding-top:5px; }
.pt_10 { padding-top:10px; }
.pt_15 { padding-top:15px; }
.pt_20 { padding-top:20px; }
.pt_25 { padding-top:25px; }
.pt_30 { padding-top:30px; }
.pt_35 { padding-top:35px; }
.pt_40 { padding-top:40px; }
.pt_45 { padding-top:45px; }
.pt_50 { padding-top:50px; }
.pt_100 { padding-top:100px; }
.pt_200 { padding-top:200px; }

.pl_0 { padding-left:0px; }
.pl_5 { padding-left:5px; }
.pl_10 { padding-left:10px; }
.pl_15 { padding-left:15px; }
.pl_20 { padding-left:20px; }
.pl_25 { padding-left:25px; }
.pl_30 { padding-left:30px; }
.pl_35 { padding-left:35px; }
.pl_40 { padding-left:40px; }
.pl_45 { padding-left:45px; }
.pl_50 { padding-left:50px; }

.pr_0 { padding-right:0px; }
.pr_5 { padding-right:5px; }
.pr_10 { padding-right:10px; }
.pr_15 { padding-right:15px; }
.pr_20 { padding-right:20px; }
.pr_25 { padding-right:25px; }
.pr_30 { padding-right:30px; }
.pr_35 { padding-right:35px; }
.pr_40 { padding-right:40px; }
.pr_45 { padding-right:45px; }
.pr_50 { padding-right:50px; }

/**************************************************
* margin
**************************************************/
.mb_0 { margin-bottom:0px; }
.mb_5 { margin-bottom:5px; }
.mb_10 { margin-bottom:10px; }
.mb_15 { margin-bottom:15px; }
.mb_20 { margin-bottom:20px; }
.mb_25 { margin-bottom:25px; }
.mb_30 { margin-bottom:30px; }
.mb_35 { margin-bottom:35px; }
.mb_40 { margin-bottom:40px; }
.mb_45 { margin-bottom:45px; }
.mb_50 { margin-bottom:50px; }

.mt_0 { margin-top:0px; }
.mt_5 { margin-top:5px; }
.mt_10 { margin-top:10px; }
.mt_15 { margin-top:15px; }
.mt_20 { margin-top:20px; }
.mt_25 { margin-top:25px; }
.mt_30 { margin-top:30px; }
.mt_35 { margin-top:35px; }
.mt_40 { margin-top:40px; }
.mt_45 { margin-top:45px; }
.mt_50 { margin-top:50px; }

.ml_0 { margin-left:0px; }
.ml_5 { margin-left:5px; }
.ml_10 { margin-left:10px; }
.ml_15 { margin-left:15px; }
.ml_20 { margin-left:20px; }
.ml_25 { margin-left:25px; }
.ml_30 { margin-left:30px; }
.ml_35 { margin-left:35px; }
.ml_40 { margin-left:40px; }
.ml_45 { margin-left:45px; }
.ml_50 { margin-left:50px; }

.mr_0 { margin-right:0px; }
.mr_5 { margin-right:5px; }
.mr_10 { margin-right:10px; }
.mr_15 { margin-right:15px; }
.mr_20 { margin-right:20px; }
.mr_25 { margin-right:25px; }
.mr_30 { margin-right:30px; }
.mr_35 { margin-right:35px; }
.mr_40 { margin-right:40px; }
.mr_45 { margin-right:45px; }
.mr_50 { margin-right:50px; }

/**************************************************
* layout
**************************************************/
/* 그누보드 레이아웃 초기화 */
#hd_pop, #hd_wrapper, #tnb .inner, #gnb .gnb_wrap { width:100%; max-width:750px; }
#wrapper { margin-top:calc(10.3125rem + 1.5%); }
#container_wr { width:100%; }
#hd, #wrapper { min-width:inherit; }
#container { width:100%; float:none; margin:0 auto; }

/* 레이아웃 재설정 */
.section { margin:7% 0; }
.section:first-of-type { margin:3% 0 7%; }

.container { width:100%; max-width:750px; margin:0 auto; }
.container-fluid { position:relative; width:100%; margin:0 auto; }
.container-lg { position:relative; width:100%; max-width:1680px; margin-left:auto; margin-right:auto; }
.container-md { position:relative; width:100%; max-width:1440px; margin-left:auto; margin-right:auto; }
.container-sm { position:relative; width:100%; max-width:1300px; margin-left:auto; margin-right:auto; }
.container-xs { position:relative; width:100%; max-width:1080px; margin-left:auto; margin-right:auto; }
.container-cnt { position:relative; width:100%; max-width:1200px; margin-left:auto; margin-right:auto; }

@media (max-width:1679px) {
    .container-lg { padding:0 15px; }
}
@media (max-width:1439px) {
    html, body { font-size:15px; }
    .container-md { padding:0 15px; }
}
@media (max-width:1299px) {
    html, body { font-size:14px; }
    .container-sm { padding:0 15px; }
}
@media (max-width:1199px) {
    .container-cnt { padding:0 15px; }
}
@media (max-width:1079px) {
    .container-xs { padding:0 15px; }
}
@media (max-width:991px) {
    .section { margin:10% 0; }
}
@media (max-width:749px) {
    html, body { font-size:13px; }
    .container { padding:0 1.66rem; }
}
@media (max-width:479px) {
    html, body { font-size:12px; }
    
    /*	.container-fluid { padding:0 1.66rem; }*/
    .container-lg { padding:0 1.66rem; }
    .container-md { padding:0 1.66rem; }
    .container-sm { padding:0 1.66rem; }
    .container-xs { padding:0 1.66rem; }
    .container-cnt { padding:0 1.66rem; }
}
@media (max-width:419px) {
    html, body { font-size:11px; }
}
@media (max-width:379px) {
    html, body { font-size:10px; }
}

/**************************************************
* color
**************************************************/
.text-primary { color:#fee06e; }
.text-secondary { color:#ec5c16; }
.text-third { color:#607dbf; }
/* .text-point01 { color:#e34343; } */
.text-link { position:relative; color:#888; }
.text-link:after { content:""; position:absolute; left:0; right:0; bottom:0; display:inline-block; width:100%; height:0.5px; background-color:#888; }
.text-white { color:#fff; }

.highlight { position:relative; display:inline-block; z-index:0; }
.highlight:before { content:""; position:absolute; left:0; bottom:5px; display:inline-block; width:100%; height:0.6em; background-color:#ebd8ca; z-index:-1; }

/**************************************************
* list style
**************************************************/
.dot-list li { font-size:14px; }
.dot-list li + li { }
.dot-list li:before { content:''; display:inline-block; width:4px; height:4px; background-color:#131313; border-radius:50%; position:relative; top:-3px; margin-right:7px; }

.order-list { list-style-type:decimal; list-style-image:inherit; list-style-position:inside; }
.order-list li { list-style-type:decimal; list-style-image:inherit; list-style-position:inside; }
.unorder-list { list-style-type:disc; list-style-image:inherit; list-style-position:inside; position:inside; }
.unorder-list li { list-style-type:disc; list-style-image:inherit; list-style-position:inside; }

/**************************************************
* title
**************************************************/
h2, .h2 { font-size:2rem; }
h3, .h3 { font-size:1.875rem; }
h4, .h4 { font-size:1.75rem; }
h5, .h5 { font-size:1.625rem; }
h6, .h6 { font-size:1.5rem; }
.line { border-bottom:1px solid rgba(255,255,255,0.1); }

/**************************************************
* form control
**************************************************/
.form-control { height:36px; line-height:34px; padding:0 10px; box-sizing:border-box; background-color:#fff; border:1px solid #ddd; color:#333; font-weight:400; }
.form-control:disabled { background-color:transparent; border-color:transparent; }

/**************************************************
* select
**************************************************/
.form_group .ui-selectmenu-button.ui-button { background-color:#303e46; border:1px solid #384952; color:#fff; font-weight:100; padding:0 10px; }
.form_group.small .ui-selectmenu-button.ui-button { height:30px; line-height:28px; font-size:13px; }
.form_group.middle .ui-selectmenu-button.ui-button { height:40px; line-height:38px; font-size:14px; }
.form_group.big .ui-selectmenu-button.ui-button { height:60px; line-height:58px; font-size:15px; }
.form_group .ui-selectmenu-icon.ui-icon { width:13px; height:7px; position:absolute; right:0; top:50%; margin-right:5px; margin-top:-3px; }
.form_group .ui-icon-triangle-1-s { background-position:-10px -285px; transition:all 0.5s; }
.ui-selectmenu-menu .ui-widget.ui-widget-content { background-color:#303e46; border:1px solid #384952; border-top:0 none; }
.ui-menu .ui-menu-item-wrapper { padding:0 10px; color:#fff; line-height:29px; }
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button.ui-state-active:hover { color:#fff; background:transparent; }
.form_group .ui-selectmenu-button.ui-selectmenu-button-open .ui-icon-triangle-1-s { transform:rotate(180deg); }

select.form-control { outline:none; }

/**************************************************
* radio
**************************************************/
.form_group.radio .radio_inline { display:inline-block; margin-right:15px; }
.form_group.radio label { position:relative; display:inline-block; font-size:14px; line-height:22px; vertical-align:middle; }
.form_group.radio label:before { content:''; position:absolute; left:0; top:0; display:inline-block; width:22px; height:22px; margin-left:-30px; border:1px solid #d9d9d9; border-radius:50%; -webkit-transition:border 0.15s ease-in-out; -o-transition:border 0.15s ease-in-out; transition:border 0.15s ease-in-out; background-color:#ffffff; }
.form_group.radio label:after { content:''; position:absolute; left:6px; top:6px; display:block; width:12px; height:12px; margin-left:-30px; border-radius:50%; background-color:#4995c4; -webkit-transform:scale(0, 0); -ms-transform:scale(0, 0); -o-transform:scale(0, 0); transform:scale(0, 0); -webkit-transition:-webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); -moz-transition:-moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); -o-transition:-o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); transition:transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
.form_group.radio input[type='radio'] { z-index:1; width:30px; height:30px; opacity:0; }
.form_group.radio input[type='radio']:checked + label:after { -webkit-transform:scale(1, 1); -ms-transform:scale(1, 1); -o-transform:scale(1, 1); transform:scale(1, 1); }
.form_group.radio input[type='radio']:disabled + label { color:#999999; }
.form_group.radio input[type='radio']:disabled + label:before { background-color:#f2f2f2; cursor:not-allowed; }
.form_group.radio input[type='radio']:disabled:checked + label:before { background-color:#ffffff; border-color:#eaeaeb; cursor:not-allowed; }
.form_group.radio input[type='radio']:disabled:checked + label:after { background-color:#c4d9e9; }
.ie8 .form_group.radio label:before,
.ie8 .form_group.radio label:after { display:none; }
.form_group.radio.no_label label { font-size:0; line-height:0; top:-21px; }

.form_group.radio.small label { line-height:14px; }
.form_group.radio.small label:before { width:14px; height:14px; }
.form_group.radio.small label:after { left:3px; top:3px; width:10px; height:10px; }

/**************************************************
* checkbox
**************************************************/
.form_group.checkbox label { position:relative; display:inline-block; padding-left:9px; font-size:14px; line-height:22px; vertical-align:middle; }
.form_group.checkbox label:before { content:''; position:absolute; left:0; top:0; display:inline-block; width:22px; height:22px; margin-left:-22px; border:1px solid #dadada; -webkit-transition:border 0.15s ease-in-out, color 0.15s ease-in-out; -o-transition:border 0.15s ease-in-out, color 0.15s ease-in-out; transition:border 0.15s ease-in-out, color 0.15s ease-in-out; background-color:#ffffff; }
.form_group.checkbox.round label:before { border-radius:50%; }
.form_group.checkbox.round label:before { background-color:#dadada; }
.form_group.checkbox.round label:after { content:''; }
.form_group.checkbox label:after { position:absolute; top:50%; left:5px; display:block; width:13px; height:10px; margin:-5px 0 0 -22px; /*background:url('../images/common/ico_common.png') no-repeat -210px -55px; */}
.form_group.checkbox input[type='checkbox'] { z-index:1; width:20px; height:20px; vertical-align:middle; opacity:0; }
.form_group.checkbox input[type='checkbox']:checked + label:before { background-color:#4995c4; border-color:#4995c4; }
.form_group.checkbox input[type='checkbox']:checked + label:after { content:''; }
.form_group.checkbox input[type='checkbox']:disabled + label { color:#999999; }
.form_group.checkbox input[type='checkbox']:disabled + label:before { background-color:#f2f2f2; cursor:not-allowed; }
.form_group.checkbox input[type='checkbox']:disabled:checked + label:before { background-color:#c4d9e9; border-color:#c4d9e9; cursor:not-allowed; }
.form_group.checkbox.small input[type='checkbox'] { width:12px; height:12px; }
.form_group.checkbox.small label { padding-left:7px; min-height:16px; font-size:13px; line-height:14px; }
.form_group.checkbox.small label:before { width:14px; height:14px; margin-left:-14px; }
.form_group.checkbox.small label:after { top:50%; left:4px; width:8px; height:8px; margin:-4px 0 0 -13px; background:#4995c4; }
.form_group.checkbox.small input[type='checkbox']:checked + label:before { background-color:#ffffff; border-color:#e1e1e1; }
.form_group.checkbox.small input[type='checkbox']:disabled:checked + label:after { background:#c4d9e9; }
.form_group.checkbox.color input[type='checkbox'] { width:12px; height:12px; }
.form_group.checkbox.color label { padding-left:7px; font-size:13px; line-height:14px; }
.form_group.checkbox.color label:before { width:14px; height:14px; margin-left:-14px; border-color:transparent !important; }
.form_group.checkbox.color label:after { top:50%; left:4px; width:9px; height:7px; margin:-3px 0 0 -14px; background-position:-230px -55px; }
.form_group.checkbox.color.black label:before { background-color:#0c0c0c !important; }
.form_group.checkbox.color.white label:before { background-color:#f5f5dc !important; }
.form_group.checkbox.color.red label:before { background-color:#dd353a !important; }
.form_group.checkbox.color.purple label:before { background-color:#7b008e !important; }
.form_group.checkbox.color.gray label:before { background-color:#969696 !important; }
.form_group.checkbox.color.gold label:before { background-color:#d1a449 !important; }
.form_group.checkbox.color.silver label:before { background-color:#c7c9c8 !important; }
.form_group.checkbox.color.pink label:before { background-color:#f16eaa !important; }
.form_group.checkbox.color.navy label:before { background-color:#2e3552 !important; }
.form_group.checkbox.color.green label:before { background-color:#00a651 !important; }
.form_group.checkbox.color.brown label:before { background-color:#926d5d !important; }
.form_group.checkbox.color.khaki label:before { background-color:#91a174 !important; }
.form_group.checkbox.color.yellow label:before { background-color:#fbd800 !important; }
.form_group.checkbox.color.multi label:before { background:url('../images/common/multi.jpg') no-repeat 0 0 !important; }
.ie8 .form_group.checkbox label:before,
.ie8 .form_group.checkbox label:after { display:none; }
.ie8 .form_group.checkbox label { padding-left:0; }

/**************************************************
* input.file
**************************************************/
.file_sh { position:relative; padding-right:90px; margin-top:5px; }
.file_sh .file_name { display:block; height:30px; line-height:30px; }
.file_sh .real_file { display:none; }
.file_sh .fake_file { position:absolute; top:0; right:0; }
.info_file { padding:5px 0 8px; color:#999999; font-size:12px; }

/**************************************************
* icon
**************************************************/
[class^=icon-] { display:inline-block; overflow:hidden; margin:0; padding:0; border:0; background-color:transparent; background-position:50% 50%; background-repeat:no-repeat; background-size:100% auto; font-size:0; line-height:0; text-decoration:none; vertical-align:middle; text-indent:-1000em; }

.icon-arrow01 { width:0.5rem; height:0.5rem; margin-top:-2px; background-image:url("../img/common/icon-arrow01.png"); }
.icon-arrow02 { width:0.5rem; height:0.5rem; margin-top:-2px; background-image:url("../img/common/icon-arrow02.png"); }
.icon-zoom { width:2.25rem; height:2.25rem; background-image:url("../img/common/icon-zoom.png");}
/**************************************************
* btn_type
**************************************************/
.btn-wrap { margin-top:1.875rem; text-align:center; }
.btn-wrap::after { content:""; display:block; clear:both; overflow:hidden; }
.btn { position:relative; display:inline-block; height:2.25rem; line-height:2.0625rem; padding:0 1.25rem; min-width:5rem; font-size:1rem; text-align:center; border:1px solid transparent; background-color:transparent; vertical-align:middle; color:#fff; }
.btn.big { height:50px; line-height:50px; font-size:1.125rem; }
.btn.small { height:30px; padding:0 15px; min-width:10px; line-height:30px; font-size:13px; }
.btn.xsmall { height:26px; padding:0 10px; min-width:10px; line-height:26px; font-size:12px; }

.btn.text-type { height:auto; line-height:1; padding:0; color:#888; border-radius:0; font-size:0.875rem; font-weight:400; }

.btn:disabled { opacity:0.3; }

/**************************************************
* badge
**************************************************/
.badge { padding:1px 10px; border-radius:2rem; font-size:1.125rem; }
.badge.type01 { background-color:#ebba28; color:#fff; }

/**************************************************
* paging
**************************************************/
.paging { position:relative; margin:20px 0 15px 0; text-align:center; }
.paging * { vertical-align:top; }
.paging a { display:inline-block; min-width:28px; height:28px; padding:0 8px; margin:0 1px 0 0; font-size:13px; line-height:26px; text-align:center; border:1px solid #7c7c7c; }
.paging a.active { border-color:#4995c4; background-color:#4995c4; color:#fff; }
.paging a.icon_comb:before { position:relative; top:0px; }

/**************************************************
* 이전/다음
**************************************************/
.pn_wrap { position:relative; }
.pn_wrap > ul { padding:40px 80px; }
.pn_wrap > ul:after { content:''; display:block; clear:both; }
.pn_wrap > ul > li .c_title { position:relative; font-size:14px; padding:0 80px 0 2px; }
.pn_wrap > ul > li .date { position:absolute; top:0; right:30px; font-size:13px; color:#999999; }
.pn_wrap > ul > li.next_wrap .c_title { padding:0 60px 0 28px; }
.pn_wrap > ul > li.next_wrap .date { right:0; }
.pn_wrap .btn_btype01.icon_comb:before { position:relative; top:50%; left:50%; margin-left:-6px; margin-top:-12px; }
.pn_wrap .btn_btype02.icon_comb:before { position:relative; top:50%; left:50%; margin-left:-3px; margin-top:-7px; }
.pn_wrap .btn_btype01 { display:inline-block; width:40px; height:70px; background:rgba(255,255,255,0.1); font-size:0; overflow:hidden; border:1px solid #b3b3b3; }
.pn_wrap .btn_btype02 { display:inline-block; width:30px; height:50px; background:rgba(255,255,255,0.1); font-size:0; overflow:hidden; border:1px solid #b3b3b3; }
.pn_wrap .btn_btype01.btn_ppos { position:absolute; top:50%; left:20px; margin-top:-35px; }
.pn_wrap .btn_btype01.btn_npos { position:absolute; top:50%; right:20px; margin-top:-35px; }
.pn_wrap .btn_btype02.btn_ppos { position:absolute; top:50%; left:20px; margin-top:-25px; }
.pn_wrap .btn_btype02.btn_npos { position:absolute; top:50%; right:20px; margin-top:-25px; }

/**************************************************
* tabbox
**************************************************/
.tabbox { }
.tabbox:before { content:""; display:block; clear:both; overflow:hidden; }
.tabbox:after { content:""; display:block; clear:both; overflow:hidden; }
.tabbox li { float:left; position:relative; }

.hiddencontents { display:none; }
.hiddencontents.active { display:block; }

/**************************************************
* 검색
**************************************************/
.sh_wrap { padding:20px 40px; text-align:center; border:1px solid rgba(255,255,255,0.5); }
.sh_wrap * { vertical-align:middle; }
.sh_wrap input[type="text"] { width:300px; margin-right:3px; }
.sh_wrap label { margin-right:13px; font-size:18px; }
.sh_wrap button { width:100px; text-align:center; }
.sh_wrap .ui-selectmenu-button.ui-button { width:170px; margin-right:3px; }
.sh_wrap .tooltip_wrap { top:-4px; }
.sh_wrap dl:after { content:''; display:block; clear:both; }
.sh_wrap dl dt { float:left; padding:0 20px; font-size:14px; line-height:30px; }
.sh_wrap dl dd { float:left; }
.sh_wrap .datepicker_wrap { position:absolute; top:20px; right:20px; }
.sh_wrap .datepicker_wrap .datepicker_box ~ .datepicker_box { margin:0 5px; }
.sh_wrap .datepicker_wrap .ui-datepicker-trigger { margin-right:10px; }
.sh_wrap .datepicker_wrap input[type="text"] { width:140px; height:30px; }

.sh_wrap.type2 { position:relative; border-color:rgba(255,255,255,0.5); }

/**************************************************
* cursor
**************************************************/
.cursor { cursor:pointer; }

/**************************************************
* text-align
**************************************************/
.text-right { text-align:right !important; }
.text-left { text-align:left !important; }
.text-center { text-align:center !important; }

/**************************************************
* float
**************************************************/
.flbox { float:left; }
.frbox { float:right; }

/**************************************************
* clearfix
**************************************************/
.clearfix:before { content:""; display:block; clear:both; overflow:hidden; }
.clearfix:after { content:""; display:block; clear:both; overflow:hidden; }

/**************************************************
* display
**************************************************/
.d-block { display:block; }
.d-inline { display:inline; }
.d-inline-block { display:inline-block; }

.d-flex { display:flex; }
.flex-wrap { flex-wrap:wrap; }
.justify-content-center { justify-content:center; }
.justify-content-start { justify-content:flex-start; }
.justify-content-between { justify-content:space-between; }
.justify-content-around { justify-content:space-around; }
.justify-content-evenly { justify-content:space-evenly; }
.align-items-center { align-items:center; }
.align-items-end { align-items:flex-end; }
.align-items-start { align-items:flex-start; }
.align-items-stretch { align-items:stretch; }

/**************************************************
* show/hide
**************************************************/
.hide { display:none; }
.show { display:block; }

.mobile-only { display:none; }
.tablet-only { display:none; }
.laptop-only { display:none; }
.pc-only { display:none; }

@media screen and (min-width:0) and (max-width:767px) {
    .mobile-only { display:block; }
    .mobile-only.inline { display:inline-block; }
}
@media screen and (min-width:768px) and (max-width:1023px) {
    .tablet-only { display:block; }
    .tablet-only.inline { display:inline-block; }
}
@media screen and (min-width:1024px) and (max-width:1279px) {
    .laptop-only { display:block; }
    .laptop-only.inline { display:inline-block; }
}
@media screen and (min-width:1280px) {
    .pc-only { display:block; }
    .pc-only.inline { display:inline-block; }
}

/**************************************************
* position
**************************************************/
.position-static { position:static !important; }
.position-absolute { position:absolute; }
.position-relative { position:relative; }

/**************************************************
* opacity
**************************************************/
.opa10 { opacity:0.1; }
.opa20 { opacity:0.2; }
.opa30 { opacity:0.3; }
.opa40 { opacity:0.4; }
.opa50 { opacity:0.5; }
.opa60 { opacity:0.6; }
.opa70 { opacity:0.7; }
.opa80 { opacity:0.8; }
.opa90 { opacity:0.9; }

/**************************************************
* ellipsis
**************************************************/
.ellipsis { display:inline-block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.4; }
.ellipsis.line2 { max-height:2.8em; }
.ellipsis.line3 { max-height:4.2em; }
.ellipsis.line4 { max-height:5.6em; }
.ellipsis.line5 { max-height:7em; }

/**************************************************
* modal
**************************************************/
.transparents-layer { display:none; position:fixed; left:0; right:0; top:0; bottom:0; width:100vw; height:100vh; background-color:#000; filter:alpha(opacity="50"); opacity:0.5; z-index:100; }
.modal { position:fixed; left:-99999px; top:-99999px; z-index:1050; outline:0; }
.modal .modal-dialog { position:relative; width:auto; margin:0.5rem; }
.modal-content { position:relative; width:100%; pointer-events:auto; background-color:#fff; outline:0; }
.modal .modal-close { position:absolute; right:10%; top:10%; display:inline-block; width:2.062rem; height:2.062rem; background:url("../img/common/modal-close.png") no-repeat center/100% auto; z-index:1060; }

/**************************************************
* 그누보드 추가
**************************************************/
/* skip */
#skip a { position:absolute; top:0; left:-9999px; z-index:100; }
#skip a:focus { display:block; top:0; left:0; width:100%; padding:10px 0; background:#fff; color:#000; font-weight:300; text-align:center; }

/* paging */
.pg_wrap { margin-top:30px; text-align:center; font-size:0; }
.pg_wrap .pg a { display:inline-flex; width:32px; height:32px; border:1px solid #ccc; border-left:0 none; background-color:#fff; text-align:center; font-size:12px; color:#131313; justify-content:center; align-items:center; }
.pg_wrap .pg a:first-child { border-left:1px solid #ccc; border-radius:3px 0 0 3px; }
.pg_wrap .pg a:last-child { border-radius:0 3px 3px 0; }
.pg_wrap .pg a.pg_current { background-color:#7c94c4; color:#fff; }

/**************************************************
* header
**************************************************/
#hd { position:absolute; top:0; width:100%; min-width:auto; height:10.3125rem; background:url('../img/common/bg_header.png') repeat-x center top; z-index:100; }
#hd.fixed { position:fixed; top:0; height:8rem; box-shadow: 0px 2px 12.75px 2.25px rgba(0, 0, 0, 0.05); }
#hd.fixed + #wrapper { margin-top:calc(5rem + 3%); transition:all 0.3s; }
#hd.fixed #hd_wrapper { height:5rem; transition:all 0.3s; }
#hd.fixed #logo { width:16rem; padding-top:1.5rem; transition:all 0.3s; }
#hd.fixed #gnb #gnb_1dul { font-size:0.8664em; line-height:3rem; transition:all 0.15s; }
#hd.fixed #gnb .gnb_1dli { line-height:3rem; transition:all 0.15s; }
#hd.fixed .gnb_1da { font-size:1rem; transition:all 0.15s; }

#hd_wrapper { width:100%; height:6.25rem; transition:all 0.3s; }
#logo { float:none; width:20rem; margin:0 auto; padding-top:1.875rem; transition:all 0.3s; }
#logo img { width:100%; transition:all 0.3s; }

#gnb { margin-top:-1px; transition:all 0.3s; }
.gnb_wrap { width:100%; background-color:#fff; transition:all 0.3s; }
#gnb #gnb_1dul { display:flex; justify-content:space-around; border:none;transition:all 0.3s;  }
#gnb .gnb_1dli { line-height:4.0625rem; float:none; transition:all 0.3s; }
.gnb_1da { padding:0 0.9375rem; font-size:1.25rem; color:#5a3716; transition:all 0.3s; }
#gnb .gnb_1dli:hover > a { color:#5a3716; }

/**************************************************
* footer
**************************************************/
#ft { width:100%; min-width:inherit; margin:5rem auto 0; text-align:center; background-color:#fff; transition:all 0.3s; }
.footer_bed { max-width:750px; margin:0 auto; }

.footer_back { display:flex; justify-content:center; width:100%; height:80px; background:url('../img/common/bg_footer.png') repeat-x center top; }
.footer_back a { display:flex; align-items:center; font-size:1.75rem; color:#5a3716; text-align:center; font-weight:600; }

.footer_back2 { width:100%; height:185px; background:url('../img/common/bg_footer_02.png') repeat-x center top; }
.footer_bandai { display:flex; align-items:center; justify-content: center; margin:0 auto; padding:80px 0 0 0; font-size:1.0625rem; color:#fff; text-align:center; }

/**************************************************
* page top
**************************************************/
#top_btn2 { position:fixed; bottom:20px; right:20px; width:155px; height:176px; border:none; z-index:90; background:url('../img/common/btn_pagetop.png'); opacity:0; }
#top_btn2.fixed { opacity:1; }

@media all and (max-width:724px) {
    #top_btn2 { background-size:40%!important; right:-80px; background:url('../img/common/btn_pagetop.png')no-repeat; bottom:-95px; }
}