@font-face {
  font-family: "Play";
  font-weight: 700;
  src: url("/font/play/Play-Bold.ttf");
}
@font-face {
  font-family: "Play";
  font-weight: 400;
  src: url("/font/play/Play-Regular.ttf");
}


/**{position: relative; box-sizing: border-box; margin: 0; padding: 0; 
    background-position: center; background-size: cover; background-repeat: no-repeat; letter-spacing: -0.02em;
    transition: 0.0s; font-family: 'NanumSquare';}*/
/*body{min-width: 1520px; overflow-x: auto;}
input[type=password] {font-family:'Malgun gothic', dotum, sans-serif;}
body{max-width: 1520px; margin: 0 auto;}
li{display: block;}
input{border: 1px #e0e0e0 solid;}
button{border: none; border-radius: 10px;}
span{display: inline-block;}*/

/*html{font-size: 10px; font-family: 'Play';}*/
/**{transition-duration: 100ms}*/
div, li, p, span, th, td, input, button{font-family: 'Play';}
span, p, li{line-height: 140%; letter-spacing: -0.025em;}

.flex{display: flex;}
.flex-wrap{display: flex; flex-wrap: wrap;}
.flex-center-x{display: flex; justify-content: center;}
.flex-center-y{display: flex; align-items: center;}
.flex-center{display: flex; align-items: center; justify-content: center;}
.flex-equal{display: flex;}
.flex-equal > *{flex: 1;}
.flex-not-equal{flex: unset;}
.flex-vertical{display: flex; flex-direction: column;}
.flex-vertical-center{display: flex; flex-direction: column; align-items: center; justify-content: center;}
.flex-vertical-center-y{display: flex; flex-direction: column; justify-content: center;}
.flex-vertical-center-x{display: flex; flex-direction: column; align-items: center;}
.flex-stretch{display: flex; align-items: stretch;}

.flex-center-child > *{display: flex; align-items: center; justify-content: center;}

.flex-align-left{margin-right: auto;}
.flex-align-right{margin-left: auto;}
.flex-align-top{margin-bottom: auto;}
.flex-align-bottom{margin-top: auto;}

.flex-fill-space{flex: 1;}

.child-flex > *{display: flex;}
.child-flex-center-x > *{display: flex; justify-content: center;}
.child-flex-center-y > *{display: flex; align-items: center;}
.child-flex-center > *{display: flex; align-items: center; justify-content: center;}

.abs-center-x{position: absolute; left: 50%; transform: translateX(-50%);}
.abs-center-y{position: absolute; top: 50%; transform: translateY(-50%);}
.abs-center{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.abs-align-bottom{position: absolute; bottom: 0;}
.abs-align-top{position: absolute; top:0;}
.abs-align-left{position: absolute; left:0;}
.abs-align-right{position: absolute; right:0;}
.abs-align-top-right{position: absolute; top: 0; right:0;}
.abs-to-top{position: absolute; bottom: 100%;}
.abs-to-bottom{position: absolute; top: 100%;}

.fixed-align-top{position: fixed; top: 0;}
.fixed-align-bottom{position: fixed; bottom: 0;}
.fixed-align-top-right{position: fixed; top: 0; right: 0;}
.fixed-align-top-left{position: fixed; top: 0; left: 0;}
.fixed-align-bottom-right{position: fixed; bottom: 0; right: 0;}

.grid{display: grid}

.content-center-x{text-align: center;}
.content-center-x-child > *{text-align: center;}

.fit-cell{width: 1%; white-space: nowrap;}

.front{z-index: 2;}
.frontTop{z-index: 9999;}

.text-center{text-align: center;}

.font-bolder{font-weight: 900;}
.font-bold{font-weight: 700;}
.font-semi-bold{font-weight: 600;}
.font-regular{font-weight: 400;}
.font-light{font-weight: 300;}
.font-lighter{font-weight: 100;}

.font-italic{font-style: italic;}

.hover-font-bold:hover{font-weight: 700;}
.hover-font-bolder:hover{font-weight: 900;}
.hover-text-underline:hover{text-decoration: underline;}

.border-bottom{border-bottom: 1px solid #e5e5e5;}
.border-vertical{border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;}
.borer-horizontal{border-left: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5;}
.border{border: 1px solid #e5e5e5;}

.text-elipsis{overflow: hidden; text-overflow: ellipsis;}

.button{cursor: pointer;}

/*[data-tooltip]{position:relative;}
[data-tooltip]:before,
[data-tooltip]:after{visibility:hidden;opacity:0;position:absolute;transform:translateX(-50%);white-space:nowrap;transition:all .2s ease;font-size:1.4rem;}
[data-tooltip]:before{content:attr(data-tooltip);position:absolute;top:-2rem;padding:0.5rem 1rem;border-radius:4px;color:#fff;background:#e63838;box-shadow:0 3px 8px rgba(165, 165, 165, 0.5);}
[data-tooltip]:after{content: '';border-left:5px solid transparent;top:2px;border-right:5px solid transparent;border-top:5px solid #e63838;}
[data-tooltip]:not([data-tooltip=""]):hover:before{visibility:visible;opacity:1;top:-3rem}
[data-tooltip]:not([data-tooltip=""]):hover:after{visibility:visible;opacity:1;top:-0.6rem}*/

@media(min-width: 1025px){
    html{font-size: clamp(0px, 0.5208333vw, 10px);}
    .mobile{display: none;}
    .pc-off{display: none;}

    .pc-flex{display: flex;}
    .pc-flex-wrap{display: flex; flex-wrap: wrap;}
    .pc-flex-center-x{display: flex; justify-content: center;}
    .pc-flex-center-y{display: flex; align-items: center;}
    .pc-flex-center{display: flex; align-items: center; justify-content: center;}
    .pc-flex-equal{display: flex;}
    .pc-flex-equal > *{flex: 1;}
    .pc-flex-vertical{display: flex; flex-direction: column;}
    .pc-flex-vertical-center{display: flex; flex-direction: column; align-items: center; justify-content: center;}
    .pc-flex-vertical-center-x{display: flex; flex-direction: column; align-items: center;}
    .pc-flex-vertical-center-y{display: flex; flex-direction: column; justify-content: center;}

    .pc-flex-align-left{margin-right: auto;}
    .pc-flex-align-right{margin-left: auto;}
    .pc-flex-align-top{margin-bottom: auto;}
    .pc-flex-align-bottom{margin-top: auto;}

    .pc-flex-fill-space{flex: 1;}

    .pc-flex-vertical{display: flex; flex-direction: column;}
    .pc-flex-vertical-reverse{display: flex; flex-direction: column-reverse;}

    .pc-fixed{position: fixed;}
    .pc-fixed-align-top{position: fixed; top: 0;}
    .pc-fixed-align-bottom{position: fixed; bottom: 0;}
    .pc-fixed-align-top-right{position: fixed; top: 0; right: 0;}
    .pc-fixed-align-top-left{position: fixed; top: 0; left: 0;}

    .pc-abs{position: absolute;}
    .pc-abs-center-x{position: absolute; left: 50%; transform: translateX(-50%);}
    .pc-abs-center-y{position: absolute; top: 50%; transform: translateY(-50%);}
    .pc-abs-center{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

    .pc-abs-align-bottom{position: absolute; bottom: 0;}
    .pc-abs-align-top{position: absolute; top:0;}
    .pc-abs-align-left{position: absolute; left:0;}
    .pc-abs-align-right{position: absolute; right:0;}
    .pc-abs-align-top-left{position: absolute; top: 0; left: 0;}
    .pc-abs-align-top-right{position: absolute; top: 0; right: 0;}
    
    .pc-abs-align-bottom-right{position: absolute; bottom: 0; right: 0;}
    .pc-abs-to-bottom{position: absolute; top: 100%;}

    .pc-fixed-align-top-right{position: fixed; top: 0; right: 0;}
    
    .section-title-icon{animation-name: section-title-icon; animation-duration: 1.5s;}
}
@media(max-width: 1024px){
    html{font-size: clamp(0px, 1.333333vw, 14px);}
    .pc{display: none;}
    .mobile-off{display: none;}

    .mobile-flex{display: flex;}
    .mobile-flex-wrap{display: flex; flex-wrap: wrap;}
    .mobile-flex-center-x{display: flex; justify-content: center;}
    .mobile-flex-center-y{display: flex; align-items: center;}
    .mobile-flex-center{display: flex; align-items: center; justify-content: center;}
    .mobile-flex-equal{display: flex;}
    .mobile-flex-equal > *{flex: 1;}
    .mobile-flex-vertical{display: flex; flex-direction: column;}

    .mobile-flex-center{display: flex; align-items: center; justify-content: center;}
    .mobile-flex-vertical-center{display: flex; flex-direction: column; align-items: center; justify-content: center;}

    .mobile-flex-vertical{display: flex; flex-direction: column;}
    .mobile-flex-vertical-reverse{display: flex; flex-direction: column-reverse;}

    .mobile-flex-align-left{margin-right: auto;}
    .mobile-flex-align-right{margin-left: auto;}
    .mobile-flex-align-top{margin-bottom: auto;}
    .mobile-flex-align-bottom{margin-top: auto;}

    .mobile-abs{position: absolute;}
    .mobile-abs-align-bottom{position: absolute; bottom: 0;}
    .mobile-abs-align-top{position: absolute; top:0;}
    .mobile-abs-align-left{position: absolute; left:0;}
    .mobile-abs-to-bottom{position: absolute; top: 100%;}

    .mobile-fixed-align-top-right{position: fixed; top: 0; right: 0;}

    .mobile-grid{display: grid}
}

select{display: flex; align-items: center; background-image: url(/img/common/icon_select.png); background-position: calc(100% - 1.5rem) center; background-size: 1.2rem 0.7rem;}
select:open{background-image: url(/img/common/icon_select_focused.png);}
select,
::picker(select) {appearance: base-select;}
::picker(select) {margin-top: 0.2rem; border: 0.1rem solid #ccc; border-radius: 0.5rem;}
select::picker-icon{content: none}
option {background: #fff; padding: 0.7rem 1.5rem; font-size: 1.4rem; line-height: 1.6rem; letter-spacing: 0; color: #797979;}
option::checkmark{content: none}
@keyframes section-title-icon{
  0%{
    width: 0;
  }
  75%{
    width: 0;
  }
  100%{
    width: 2rem;
  }
}

input[type="checkbox"]{accent-color: #002060;}

html.admin{font-size: clamp(0px, 0.5208333vw, 15px);}
.admin .button-a{border: 0.1rem solid #ccc; border-radius: 0.4rem; background-color: #fff; font-size: 1.4rem; line-height: 1.7rem; color: #555;}
.admin .button-a:hover,
.admin .button-a.selected{border-color: #212121; color: #212121;}
.admin .button-b{border: 0.1rem solid #353535; border-radius: 0.4rem; background-color: #353535; font-size: 1.4rem; line-height: 1.7rem; color: #fff;}
.admin .button-b:hover,
.admin .button-b.selected{border-color: #212121; background-color: #212121;}
.admin .button-c{border: 0.1rem solid #aaa; border-radius: 0.4rem; background-color: #f0f0f0; color: #353535; font-size: 1.4rem; line-height: 1.7rem;}

.admin input{padding: 0 1rem; border: 0.1rem solid #ccc; border-radius: 0.4rem; background-color: #fff; font-size: 1.4rem; line-height: 1.7rem; color: #353535;}
.admin input[type="checkbox"]{height: 2rem;}
.admin .list{text-align: center;}
.admin .article-wrap{padding: 4rem; border: 0.1rem solid #e5e5e5; border-radius: 0.4rem; background-color: #fff;}
.admin .page-button{width: 3rem; height: 3rem; border: 0.1rem solid #d9d9d9; border-radius: 0.4rem; font-size: 1.4rem; line-height: 2rem; color: #555;}
.admin .page-button:hover,
.admin .page-button.selected{border-color: #353535; background-color: #353535; color: #fff; transition: 0.2s;}
.admin .nav-button{width: 3rem; height: 3rem;}
.admin .form-input-wrap{height: 6rem; border-top: 0.1rem solid #d9d9d9;}
.admin .form-input-wrap:last-of-type{border-bottom: 0.1rem solid #d9d9d9;}

.admin .form-input-label{width: 15rem; padding: 0 2rem; border: 0.1rem solid #f4f5f6; background-color: #f4f5f6; font-size: 1.6rem; line-height: 1.9rem; font-weight: 600; color: #212121;}
.admin .form-input-data{padding: 0 1rem; border: 0.1rem solid #e5e5e5; border-bottom-right-radius: 0.4rem; border-top-right-radius: 0.4rem; background-color: #fff; font-size: 1.6rem; line-height: 2rem; color: #353535;}
.admin .form-input{flex: 1}
.admin .form-input_title::placeholder{color: #aaa;}