@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
@font-face {
    font-family: 'bahnschrift';
    src: url('/font/bahnschrift-light.ttf');
}


*{
    padding: 0; margin: 0; box-sizing: border-box;
    font-weight: 500; color: #1A1A1A;
    font-family: 'bahnschrift', sans-serif;
    /* font-family: 'Roboto', '맑은 고딕', sans-serif; */
}
html, body{ width: 100vw; overflow-x: hidden; background: #FFF; }
/* html.active, body.active{ position: absolute; height: 100vh; overflow: hidden;} */
html.active, body.active{ overflow: hidden;}
.maxWidth{ max-width: 1600px; width: 100%; margin: 0 auto; }

/**********************************************/
li{ list-style: none; }
a{ display: inline-block; text-decoration: none; cursor: pointer; }
label, span, p{ display: inline-block; }
b, strong{ font-weight: bolder; }
img{ display: inline-block; border: none; object-fit: contain; }
button{ cursor: pointer; border: none; background: transparent; }
textarea{ resize: none; }
table{ width: 100%; border-spacing: 0; border-collapse: collapse; table-layout: fixed;  text-align: center; }
input{ border: 1px solid #C6C6C6; border-radius: 5px; box-shadow: 0px 2px 10px rgba(156, 156, 156, 0.25);}
input::placeholder{ color: #C8C8C8; font-weight: 400; }
input:read-only{ outline: none;}


/**********************************************/
/* ========================== input reset */
/* input number */
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
input[type="number"]{ -moz-appearance: textfield; }

/**********************************************/

select{
    width: 100%; height: 40px; 
    background: #fff url('/html/img/user/common/ico_select.svg') no-repeat center right 12px; background-size: 18px; box-shadow: 0px 2px 10px rgba(156, 156, 156, 0.25); 
    border: 1px solid #ddd; border-radius: 3px;
    font-weight: 400; text-align: center;
    -o-appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

select::-ms-expand{ display:none; }
.bg_select{ 
    position: fixed; z-index: 1; top: 0; left: 0; display: none; width: 100%; height: 100%; 
}
.wrap_select{ position: relative; width: 100%;}
.wrap_select > *{ width: 100%;}
.selectBtn{ 
    position: relative; z-index: 3;
    height: 50px; 
    background: #fff url('/html/img/user/common/ico_select.svg') no-repeat center right 20px; box-shadow: 0px 2px 10px rgba(156, 156, 156, 0.25); 
    background-size: 15px;
    border: 1px solid #ddd; border-radius: 3px;
    font-weight: 400; font-size: 22px; cursor: pointer;
}
.selectOpt{ 
    position: absolute; left: 0; top: 50px; z-index: 5; display: none;
    filter: drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.25)); background: #fff;
}
.selectOpt label{ 
    display: flex; align-items: center; justify-content: center; 
    width: 100%; height: 50px; border: 1px solid #DDD;         
    font-weight: 400; font-size: 22px; color: rgba(26, 26, 26, 0.8); cursor: pointer;
}
.selectOpt label:hover{ background: rgba(255, 232, 151, 0.5); }

/* ========================== jq ui - select */
.ui-selectmenu-button.ui-button{ 
    display: flex; align-items: center; height: 50px; 
    background: #fff; box-shadow: 0px 2px 10px rgba(156, 156, 156, 0.25); 
    border: 1px solid #ddd; border-radius: 3px;
    font-weight: 400; font-size: 22px; 
}
.ui-selectmenu-text{ order: 1; flex: 1;}
.ui-selectmenu-icon.ui-icon{ float: none; order: 2;}

.ui-widget.ui-widget-content{ filter: drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.25)); border: 1px solid #DDD; }
.ui-selectmenu-menu .ui-menu-item{ border-bottom: 1px solid #DDD; }
.ui-selectmenu-menu .ui-menu-item:last-of-type{ border: none; }
.ui-menu .ui-menu-item-wrapper{
    display: flex; align-items: center; justify-content: center; height: 50px; padding: 0; margin: 0; 
    text-align: center; font-weight: 400; font-size: 22px; color: rgba(26, 26, 26, 0.8) !important; 
}
.ui-selectmenu-menu .ui-state-active{ background: #F9F9F9 !important; border: none !important; }

/**********************************************/
/* ========================== responsive */
@media screen and (min-width: 1025px){
    *{ font-size: 16px;}
    .pc{ display: inline-block;}
    .mobile{ display: none;}
}
@media screen and (max-width: 1024px){
    *{ font-size: 14px;}
    .pc{display: none;}
    .mobile{display: inline-block;}
    select{
        background-position-x: right;
    }

    
}
@media screen and (max-width: 560px){
    *{ font-size: 12px;}

    .ui-selectmenu-button.ui-button{ padding: 0 12px;}
}
@media screen and (max-width: 375px){
    .ui-selectmenu-button.ui-button{ padding: 0 4px;}
}