@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

/*240621 원모바일체 추가*/
@font-face {
    font-family: 'ONE-Mobile-Title';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Title.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OneMobile';
    font-weight: 300;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/onestore/OneMobileLight.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/onestore/OneMobileLight.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/onestore/OneMobileLight.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/onestore/OneMobileLight.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/onestore/OneMobileLight.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'OneMobile';
    font-weight: 500;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/onestore/OneMobileRegular.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/onestore/OneMobileRegular.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/onestore/OneMobileRegular.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/onestore/OneMobileRegular.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/onestore/OneMobileRegular.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'OneMobile';
    font-weight: 700;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/onestore/OneMobileBold.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/onestore/OneMobileBold.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/onestore/OneMobileBold.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/onestore/OneMobileBold.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/onestore/OneMobileBold.ttf') format("truetype");
    font-display: swap;
}


@font-face {
     font-family: 'Metropolis';
     src: url('../fonts/Metropolis-Light.woff') format('woff');
     font-weight: 300;
     font-style: normal;
}

@font-face {
     font-family: 'Metropolis';
     src: url('../fonts/Metropolis-Regular.woff') format('woff');
     font-weight: 400;
     font-style: normal;
}

@font-face {
     font-family: 'Metropolis';
     src: url('../fonts/Metropolis-Medium.woff') format('woff');
     font-weight: 500;
     font-style: normal;
}

@font-face {
     font-family: 'Metropolis';
     src: url('../fonts/Metropolis-Bold.woff') format('woff');
     font-weight: 600;
     font-style: normal;
}

@font-face {
     font-family: 'Metropolis';
     src: url('../fonts/Metropolis-Black.woff') format('woff');
     font-weight: 900;
     font-style: normal;
}

@font-face {
    font-family: 's-core-dream-thin';
    src: url('../fonts/scdream1-webfont.woff2') format('woff2'),
         url('../fonts/scdream1-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 's-core-dream-extralight';
    src: url('../fonts/scdream2-webfont.woff2') format('woff2'),
         url('../fonts/scdream2-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 's-core-dream-light';
    src: url('../fonts/scdream3-webfont.woff2') format('woff2'),
         url('../fonts/scdream3-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 's-core-dream-regular';
    src: url('../fonts/scdream4-webfont.woff2') format('woff2'),
         url('../fonts/scdream4-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 's-core-dream-medium';
    src: url('../fonts/scdream5-webfont.woff2') format('woff2'),
         url('../fonts/scdream5-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 's-core-dream-bold';
    src: url('../fonts/scdream6-webfont.woff2') format('woff2'),
         url('../fonts/scdream6-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 's-core-dream-extrabold';
    src: url('../fonts/scdream7-webfont.woff2') format('woff2'),
         url('../fonts/scdream7-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 's-core-dream-heavy';
    src: url('../fonts/scdream8-webfont.woff2') format('woff2'),
         url('../fonts/scdream8-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 's-core-dream-black';
    src: url('../fonts/scdream9-webfont.woff2') format('woff2'),
         url('../fonts/scdream9-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root { 
  --font-size: 18px;
  --inner-width: 90%;
  --inner-max-width: 1460px;
  --header-height: 110px;
  --font-family: 'Metropolis','Noto Sans KR','Apple SD Gothic Neo','malgun gothic','맑은 고딕','돋움','dotum',sans-serif;
  --sec-font-family: 'Metropolis','Noto Sans KR','Apple SD Gothic Neo','malgun gothic','맑은 고딕','돋움','dotum',sans-serif;
  --title-font-family: 'Metropolis','Noto Sans KR','Apple SD Gothic Neo','malgun gothic','맑은 고딕','돋움','dotum',sans-serif;
}

body {
  --primary-color: #005c9c;
  --secondary-color: #099de8;
  --dark-color: #4D4F4E;
  --light-color: #C6C5C2;
  --success-color: #00bf6f;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #25cff2;
  --light-color: #f8f9fa;
  --dark-color: #333;


  --font-color: #222;
  --font-sec-color: #666;
  --background-color: #fff;
  --background-sec-color: #000;
  --border-color: #d5d5d5;
}

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-decoration: none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a { color: inherit; }
img { max-width: 100%;}
input {appearance:none;-webkit-appearance:none;-moz-appearance:none;border-radius: 0;-webkit-border-radius: 0;-moz-border-radius: 0; font-family: 'Metropolis','Noto Sans KR','Apple SD Gothic Neo','malgun gothic','맑은 고딕','돋움','dotum',sans-serif; }
select { border-radius: 0;-webkit-border-radius: 0;-moz-border-radius: 0; font-family: 'Metropolis','Noto Sans KR','Apple SD Gothic Neo','malgun gothic','맑은 고딕','돋움','dotum',sans-serif; }

/*240717 추가*/
*:focus{outline-offset: -2px;}

/*230809 추가*/
select:focus{outline-offset: 3px; border: 3px dashed;}

select::-ms-expand { display: none; }
strong, b { font-weight: bold; }
body { font-family: 'Metropolis','Noto Sans KR','Apple SD Gothic Neo','malgun gothic','맑은 고딕','돋움','dotum',sans-serif; color: #222; font-size: 18px; line-height: 1.75; font-weight: normal; word-break: keep-all; }

caption {width:1px; height:1px; margin:-1px; position:relative; top:0; left:0; border:none; overflow:hidden; clip:rect(0, 0, 0, 0)}
.hidden{display:block; width:1px; height:1px; margin:-1px; position:relative; top:0; left:0; border:none; overflow:hidden; clip:rect(0, 0, 0, 0)}
.skip_nav a{position: absolute; top: -100px; width: 100%; background-color: #000; color: #fff; transition: top 0.3s; height: 30px; line-height: 30px; z-index: 9999; text-align: center;}
.skip_nav a:focus{
	top:0;
	/*230727 추가*/
	box-sizing: border-box;
	outline-style: dashed;
	border: 1px dashed #eee;
}


.hide,
.blind{font-size: 0; line-height: 0; overflow: hidden; opacity: 0; width: 0; height: 0; }

/* Modals */
#modal_overlay{
    position: fixed;width: 100%; height: 100%;  left: 0; top: 0; z-index: 110;/* background:url("../img/common/transparent.png") repeat; */
    background-color: rgba(0, 0, 0, 0.5); display:none;visibility:hidden;opacity:0;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000, endColorstr=#cc000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000, endColorstr=#cc000000)";
    -webkit-transition:visibility .3s ease-in-out, opacity .3s ease-in-out;
    -moz-transition:visibility .3s ease-in-out, opacity .3s ease-in-out;
    -o-transition:visibility .3s ease-in-out, opacity .3s ease-in-out;
    transition:visibility .3s ease-in-out, opacity .3s ease-in-out;
}

/* #modal_overlay:nth-child(n){filter:none} */
#modal_overlay.on{visibility:visible;opacity:1;}

.modal{position: fixed;left:0;right:0;margin:auto;z-index: 120;display:none;visibility: hidden;opacity:0;-webkit-overflow-scrolling: touch;width: 100%; max-width:1250px; min-width: 320px; max-height: 94%; min-height: 150px; overflow: hidden;
    -webkit-transform: scale(0.6,0.6);
    -moz-transform: scale(0.6,0.6);
    -ms-transform: scale(0.6,0.6);
    -o-transform: scale(0.6,0.6);
    transform: scale(0.6,0.6);
    -webkit-transition:visibility .4s ease-in-out, opacity .4s ease-in-out, -webkit-transform .3s ease-in-out .4s, width 0.5s cubic-bezier(.67,.04,.32,1);
    -moz-transition:visibility .4s ease-in-out, opacity .4s ease-in-out, -moz-transform .3s ease-in-out .4s, width 0.5s cubic-bezier(.67,.04,.32,1);
    -ms-transition:visibility .4s ease-in-out, opacity .4s ease-in-out, -ms-transform .3s ease-in-out .4s, width 0.5s cubic-bezier(.67,.04,.32,1);
    -o-transition:visibility .4s ease-in-out, opacity .4s ease-in-out, -o-transform .3s ease-in-out .4s, width 0.5s cubic-bezier(.67,.04,.32,1);
    transition:visibility .4s ease-in-out, opacity .4s ease-in-out, transform .3s ease-in-out .4s, width 0.5s cubic-bezier(.67,.04,.32,1);
}
.modal.on{visibility: visible;opacity:1; -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1);
    -webkit-transition:visibility .3s ease-in-out, opacity .3s ease-in-out, -webkit-transform .4s cubic-bezier(.67,.04,.32,1) .1s, width 0.5s cubic-bezier(.67,.04,.32,1);
    -moz-transition:visibility .3s ease-in-out, opacity .3s ease-in-out, -moz-transform .4s cubic-bezier(.67,.04,.32,1) .1s, width 0.5s cubic-bezier(.67,.04,.32,1);
    -ms-transition:visibility .3s ease-in-out, opacity .3s ease-in-out, -ms-transform .4s cubic-bezier(.67,.04,.32,1) .1s, width 0.5s cubic-bezier(.67,.04,.32,1);
    -o-transition:visibility .3s ease-in-out, opacity .3s ease-in-out, -o-transform .4s cubic-bezier(.67,.04,.32,1) .1s, width 0.5s cubic-bezier(.67,.04,.32,1);
    transition:visibility .3s ease-in-out, opacity .3s ease-in-out, transform .4s cubic-bezier(.67,.04,.32,1) .1s, width 0.5s cubic-bezier(.67,.04,.32,1);
}
.modal > .inner {position: relative;background-color: #fff;width: 100%; height: 100%; padding: 0; box-sizing: border-box; border-radius: 27px; }
.modal > .inner:after{content: '';display: block;clear: both;}
.modal > .inner .modal_header { padding-top: 80px; padding-bottom: 40px; position: relative; margin: 0 auto; width: 86%; max-width: 960px; }
.modal > .inner .modal_header > h2 { font-size: 30px; font-weight: 600; }
.modal > .inner .modal_content { overflow-y: auto; overflow-x: hidden; min-height: 300px; margin: 0 2%; }
.modal > .inner .modal_content::-webkit-scrollbar { width: 5px; }
.modal > .inner .modal_content::-webkit-scrollbar-track { background-color: #efeff0; }
.modal > .inner .modal_content::-webkit-scrollbar-thumb { background-color: #2b3138; }
.modal > .inner .modal_content > .inner { padding-bottom: 40px; width: 90%; max-width: 960px; margin: 0 auto; }
.modal > .inner .modal_footer { height: 20px; }
.modal > .inner .modal_footer .btn_group { margin-top: 0; }

.modal .modal_close { position: absolute; top: 30px; right: 30px; z-index: 3; cursor: pointer; overflow: hidden; border: 1px solid #adadad; border-radius: 50%; background-color: transparent; width: 54px; height: 54px; padding: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='13px' height='13px'%3E%3Cpath fill-rule='evenodd' fill='rgb(51, 51, 51)' d='M12.755,11.354 L11.341,12.769 L6.391,7.819 L1.441,12.768 L0.027,11.354 L4.977,6.405 L0.027,1.455 L1.441,0.040 L6.391,4.990 L11.341,0.040 L12.755,1.455 L7.805,6.404 L12.755,11.354 Z'/%3E%3C/svg%3E"); background-size: auto; background-repeat: no-repeat; background-position: center; font-size: 0;  }

/*230731 자막 아코디언 추가*/
.wrap_caption_type1{ margin-top: 30px; }
.wrap_caption_type1 .head{display: flex;align-items: center;justify-content: space-between;padding: 20px 35px;border: 1px solid #e5e5e5;border-radius: 10px;background-color: #fff;position: relative;z-index: 2; box-shadow: 5px 7px 11px -4px rgba(0,0,0,0.1);
-webkit-box-shadow: 5px 7px 11px -4px rgba(0,0,0,0.1);
-moz-box-shadow: 5px 7px 11px -4px rgba(0,0,0,0.1);}
.wrap_caption_type1 .head .h_1{
    display: flex;
    align-items: center;
    line-height: 1;
}
.wrap_caption_type1 .head .h_1 .ico{
    margin-right: 15px;
}
.wrap_caption_type1 .head .h_1 .t{
    font-size: 15px;
    color: #222;
    font-weight: 600;
}

.wrap_caption_type1 .head .arr{
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    line-height: 1;
	border: none;
	cursor: pointer;
}
.wrap_caption_type1 .cont{background: #eeeeee;padding: 50px;font-size: 15px;line-height: 1.5;height: 250px;overflow-x: hidden;overflow-y: auto;margin-top: -10px;z-index: 0;position: relative;}
.wrap_caption_type1 .cont .inner{}


/* Lazy */
[data-lazy='parent'] [data-lazy] {
  opacity: 0;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  transition-duration: 1500ms;
  transition-timing-function: cubic-bezier(.215, .61, .355, 1);
}

[data-lazy='parent'] [data-lazy='left'] {
  -webkit-transform: translateX(-100px);
          transform: translateX(-100px);
}

[data-lazy='parent'] [data-lazy='right'] {
  -webkit-transform: translateX(100px);
          transform: translateX(100px);
}

[data-lazy='parent'] [data-lazy='bottom'] {
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
}

[data-lazy='parent'] [data-lazy='top'] {
  -webkit-transform: translateY(-100px);
          transform: translateY(-100px);
}

[data-lazy='parent'] [data-lazy-delay='1'] {
  transition-delay: 0ms;
}

[data-lazy='parent'] [data-lazy-delay='2'] {
  transition-delay: 300ms;
}

[data-lazy='parent'] [data-lazy-delay='3'] {
  transition-delay: 600ms;
}

[data-lazy='parent'] [data-lazy-delay='4'] {
  transition-delay: 900ms;
}

[data-lazy='parent'] [data-lazy-delay='5'] {
  transition-delay: 1200ms;
}

[data-lazy='parent'] [data-lazy-delay='6'] {
  transition-delay: 1500ms;
}

[data-lazy='parent'] [data-lazy-delay='7'] {
  transition-delay: 1800ms;
}

[data-lazy='parent'] [data-lazy-delay='8'] {
  transition-delay: 2100ms;
}

[data-lazy='parent'] [data-lazy-delay='9'] {
  transition-delay: 2400ms;
}

[data-lazy='parent'] [data-lazy-delay='10'] {
  transition-delay: 2700ms;
}

[data-lazy='parent'].is-show [data-lazy] {
  opacity: 1;
  -webkit-transform: translate(0);
          transform: translate(0);
}

.char-text { line-height: 1.25; }
.char-text .splitting { overflow: hidden; display: inline-block; vertical-align: middle; }
.char-text .char { position: relative; display: inline-block; }
.char-text .char:before { content: attr(data-char); position: absolute; top: 0; left: 0; visibility: hidden; transition: inherit; 
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.char-text .char:after { content: attr(data-char); position: absolute; top: 100%; left: 0; visibility: visible; transition: transform .6s; 
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.char-texts > span { display: inline-block; }
.char-texts > span + span { margin-left: 0.25em; }

.row { display: flex; flex-wrap: wrap; }
.row > [class*='col_'] { width: 100%; box-sizing: border-box; }
.row > .col_1 { width: 8.333%; }
.row > .col_2 { width: 16.666%; }
.row > .col_3 { width: 25%; }
.row > .col_4 { width: 33.333%; }
.row > .col_5 { width: 41.666%; }
.row > .col_6 { width: 50%; }
.row > .col_7 { width: 58.333%; }
.row > .col_8 { width: 66.666%; }
.row > .col_9 { width: 75%; }
.row > .col_10 { width: 83.333%; }
.row > .col_11 { width: 91.666%; }
.row > .col_12 { width: 100%; }

/* Forms */
input::placeholder,
textarea::placeholder { color: #777; }
.ipt { font-size: 0.9em; background-color: #fff; border: 1px solid #d5d5d5; color: #666; padding: 0 20px; height: 60px; box-sizing: border-box; vertical-align: middle; border-radius: 5px;  }
.ipt.wh { background-color: #000; }
textarea.ipt { width: 100%; height: auto; resize: none; line-height: 1.55; padding: 20px;}
.ipt:active, .ipt:focus { border-color: #099de8; }
.ipt:disabled { background-color: rgba(0, 0, 0, 0.25); }
.ipt.trans { border-width: 0; }
.ipt.sty01 { border-width: 0; border-bottom-width: 1px; }
.ipt.w50 { width: 50px !important; }
.ipt.w100 { width: 100px !important; }
.ipt.w200 { width: 200px !important; }
.ipt.w260 { width: 260px !important; }
.ipt.w440 { width: 440px !important; }
.ipt.w100p{ width: 100%; }
.ipt.center { text-align: center; }
.ipt_group {  position: relative; display: flex; align-items: center; width: 100%; }
.ipt_group + .ipt_group { margin-top: 1em; }
.ipt_group.right { text-align: right; }
.ipt_group .ipt { position: relative; z-index: 2; width: 100%; }
.ipt_group .pwView { position: absolute; top: 8px; right: 8px; z-index: 3; width: 30px; height: 30px; background: url(../img/ico/ico_pwview.png) center no-repeat; text-indent: -9999px; border: 0; padding: 0;  cursor: pointer; }
.ipt_group .pwView.on { background: url(../img/ico/ico_pwview_on.png) center no-repeat; }
.ipt_group +.ht { font-size: 13px; color: #ec5858; }
.ipt_group .colorSelector { position: absolute; top: 7px; right: 10px; z-index: 2; }
.ipt_left,
.ipt_right { position: relative; white-space: nowrap; vertical-align: middle; }
.ipt_left { padding-right: 0.5em; }
.ipt_left > .btn { height: 2.750em; line-height: 2.750em; }
.ipt_right { padding-left: 0.5em; }
.ipt_right > .btn { height: 60px; line-height: 38px; }
.ipt[type="number"]::-webkit-outer-spin-button,
.ipt[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ipt_group.paste > .ipt { border-radius: 0; }
.ipt_group.paste > .ipt:focus { z-index: 3; }
.ipt_group.paste > .ipt:first-child { border-top-left-radius: 20px; border-bottom-left-radius: 20px; }
.ipt_group.paste > .ipt:last-child { border-top-right-radius: 20px; border-bottom-right-radius: 20px; }
.ipt_group.paste .ipt_left,
.ipt_group.paste .ipt_right { padding: 0; }
.ipt_group.paste .ipt_left > * { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: -1px; }
.ipt_group.paste .ipt_right > * { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.ipt_group.paste .ipt_left > *:focus,
.ipt_group.paste .ipt_right > *:focus { z-index: 3; }

/* Select */
select.ipt {
    width: 100%;
    min-width: 100px;
    padding-right: 2.5em;
    vertical-align: middle;
    appearance:none;
    -ms-appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='12px' height='6px'%3E%3Cpath fill-rule='evenodd' fill='rgb(0, 0, 0)' d='M5.916,5.975 L0.720,0.975 L11.112,0.975 L5.916,5.975 Z'/%3E%3C/svg%3E") right 20px center no-repeat;
}
select.ipt.black_trans { border: 1px solid #151515; color: #000; }
select.ipt.gray { border-color: transparent; background-color: #d0d0d0; }



/* Buttons */
a.btn{display: inline-flex; align-items: center; justify-content: center;}
button.btn{cursor: pointer;}
.btn{
  display: inline-flex; justify-content: center; align-items: center; width: auto; height: 60px; padding:0 1em; font-size: 0.9em; text-align: center; box-sizing: border-box; vertical-align: middle; white-space: nowrap; position: relative; 
  border:1px solid #d6d6d6; color: #222; background-color: #eaeaea; overflow: hidden; border-radius: 5px;
  -webkit-transition:background-color .2s ease-in-out, -webkit-transform .3s ease-out;
  -moz-transition:background .2s ease-in-out, -moz-transform .3s ease-out;
  -ms-transition:background .2s ease-in-out, -ms-transform .3s ease-out;
  -o-transition:background .2s ease-in-out, -o-transform .3s ease-out;
  transition:background .2s ease-in-out, transform .3s ease-out;
}
/* .btn:before { display: inline-block; content: ''; height: 100%; vertical-align: middle; position: static; } */
.btn:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.2); opacity: 0;
  -webkit-transition:.2s ease-out; transition:.2s ease-out;
}
.btn:hover:before { opacity: 1; }
.btn > img { vertical-align: middle; display: inline-block; }
.btn.small{ min-width: 30px; height: 30px; font-size: 0.85em !important; }
.btn.large { min-width: 180px; height: 4em; line-height: 4em; border-radius: 4em; font-size: 1.25em; }
.btn.disabled { pointer-events: none; background-color: #DFDFDF !important; box-shadow: none; color: #9F9F9F !important; cursor: default; }
.btn.radius { border-radius: .2em; }
.btn.radius20 { border-radius: 1.333em; }
.btn.radius20.large { border-radius: 2.667em; }
.btn.radius20.small { border-radius: 2em; }
.btn.square { width: 40px; min-width: auto; padding: 0 0.15em; }
.btn.square.large { width: 4em; height: 4em; line-height: 4em; }
.btn.square.small { width: 2em; height: 2em; line-height: 2em; }
.btn.square.small .ico { background-size: 60%; }
.btn.shadow { -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.14); -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.14); box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.14); }
.btn.trans{border:1px solid transparent; background-color: transparent; color: #666;}

/*240222 역사페이지 내 다운로드 버튼스타일 추가*/
a.history_btn{ display: flex; align-items: center; border-radius: 2rem; padding: 3px 13px; background-color: #555; color: #fff; font-size: 14px; text-align: center; }
a.history_btn img{ vertical-align: middle; margin-left: 10px; }

.btn_primary {border:1px solid #005c9c; background-color: #005c9c; color: #fff;}
.btn_secondary {border:1px solid #099de8; background-color: #099de8; color: #fff;}
.btn_success {border:1px solid var(--success-color); background-color: var(--success-color); color: #fff;}
.btn_danger {border:1px solid var(--danger-color); background-color: var(--danger-color); color: #fff;}
.btn_warning {border:1px solid var(--warning-color); background-color: var(--warning-color); color: #fff;}
.btn_info {border:1px solid var(--info-color); background-color: var(--info-color); color: #fff;}
.btn_light {border:1px solid #C6C5C2; background-color: #C6C5C2; color: #333;}
.btn_dark {border:1px solid var(--dark-color); background-color: var(--dark-color); color: #fff;}

.btn_outline_primary {border:1px solid #005c9c;; color: #005c9c;; background-color: transparent;}
.btn_outline_secondary {border:1px solid #099de8; color: #099de8; background-color: transparent;}
.btn_outline_success {border:1px solid var(--success-color); color: var(--success-color); background-color: transparent;}
.btn_outline_danger {border:1px solid var(--danger-color); color: var(--danger-color); background-color: transparent;}
.btn_outline_warning {border:1px solid var(--warning-color); color: var(--warning-color); background-color: transparent;}
.btn_outline_info {border:1px solid var(--info-color); color: var(--info-color); background-color: transparent;}
.btn_outline_light {border:1px solid #C6C5C2; color: #C6C5C2; background-color: transparent;}
.btn_outline_dark {border:1px solid var(--dark-color); color: var(--dark-color); background-color: transparent;}


/* Checkbox */
[type="checkbox"].custom { box-sizing: border-box; padding: 0; }
[type="checkbox"].custom:not(:checked), 
[type="checkbox"].custom:checked { position: absolute; /*left: -9999px; opacity: 0;*/ width:20px; height:20px;/* 231004 수정 top:4px; left:4px; */ top:100%; left:100%; }
[type="checkbox"].custom+label {
    position: relative; cursor: pointer; display: inline-block; padding-left: 35px; height: 20px; line-height: 20px; font-size: 0.9em; margin-right: 20px;
    -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select: none;
}
[type="checkbox"].custom+label.text-none { padding-left: 20px; margin-right: 0; }
[type="checkbox"].custom+label:last-child { margin-right: 0; }
[type="checkbox"].custom+label:before,
[type="checkbox"].custom+label:after { content: ''; position: absolute; top: 0; left: 0; width: 20px; height: 20px; z-index: 0; box-sizing: border-box; transition: .2s; }
[type="checkbox"].custom+label:before { background-color: #e1e1e1;  }
[type="checkbox"].custom+label:after { width: 6px; height: 10px; left: 7px; top: 3px; border-bottom: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); opacity: 0; }
[type="checkbox"].custom:checked+label:before { background-color: #099de8; }
[type="checkbox"].custom:checked+label:after{ opacity: 1; transition: .2s; }
[type="checkbox"].custom:disabled+label { color: #b9b9b9; }
[type="checkbox"].custom:disabled+label:before { background-color: rgba(0, 0, 0, 0.25); }
[type="checkbox"].custom+label+.txt { display: inline-block; vertical-align: middle; line-height: 25px; padding-left: 8px; font-size: 15px; color: #666; }
[type="checkbox"].custom+label+.txt a { font-weight: bold; color: #333; border-bottom: 1px solid #333; }

/*230809 추가*/
[type="checkbox"].custom:focus+label { outline: auto -webkit-focus-ring-color;}
[type="checkbox"].custom:focus { outline: none;}

/* Radio */
[type="radio"].custom { box-sizing: border-box; padding: 0; }
[type="radio"].custom:not(:checked), [type="radio"].custom:checked { position: absolute; left: -9999px; opacity: 0; }
[type="radio"].custom+label {
  position: relative; cursor: pointer; display: inline-block; padding-left: 35px; min-width: 20px; height: 20px; line-height: 20px; font-size: 0.9em; margin-right: 20px;
  transition: .28s ease; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
[type="radio"].custom+label.text-none { min-width: auto; padding-left: 20px; }
[type="radio"].custom+label:last-child { margin-right: 0; }
[type="radio"].custom+label:before, 
[type="radio"].custom+label:after { content: ''; position: absolute; left: 0; top: 0; width: 20px; height: 20px; z-index: 0; transition: .28s ease; box-sizing: border-box; border-radius: 50%; }
[type="radio"].custom+label:before { border: 1px solid #d5d5d5; }
[type="radio"].custom+label:after { background-color: #099de8; opacity: 0; }
[type="radio"].custom:checked+label:after { opacity: 1; -webkit-transform: scale(0.45); transform: scale(0.45); }
[type="radio"].custom:disabled+label { color: #b9b9b9; }
[type="radio"].custom:disabled+label:before{ background-color: rgba(0, 0, 0, 0.25); }

[type="radio"].custom:checked+ ins { outline: auto -webkit-focus-ring-color;}

/*230728 추가*/
[type="radio"].custom:focus+label { outline: auto -webkit-focus-ring-color;}


/* Hover Event */
@media (hover: hover) {
  .char-text:hover .char { transition: transform .6s; transition-delay: calc(0.01s*var(--char-index)); transform: translateY(-100%); }
}


/*button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}
button {
  overflow: visible;
  margin: 0;
  padding: 0;
  cursor: pointer;
  vertical-align: middle;
  border: none;
  background: none;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}*/