/*
    Defult Setting
*/
div {
    box-sizing: border-box;
    /*모든 Div의 구조는 border-box기준으로 확립. div의 정해진 크기 밖으로 움직이는 것은 margin 뿐이며 그외는 전부 div안으로 영역을 차지하게 설정*/
}

ul {
    box-sizing: border-box;
    /*Ul 동일하게 처리*/
    list-style: none;
}

a:active,
a:visited,
a:hover,
a:link {
    text-decoration: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

br {
    letter-spacing: normal
}

p {
    letter-spacing: normal
}

input {
    vertical-align: middle
}

    input[type="text"],
    input[type="password"] {
        -webkit-appearance: none
    }

    input[type="checkbox"] {
        -webkit-appearance: none;
        -webkit-border-radius: 0
    }

    input:checked[type="checkbox"] {
        -webkit-appearance: checkbox
    }

    input[type="radio"] {
        border: none;
    }

    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    input[type="file"] {
        -webkit-appearance: button;
        border-radius: 0
    }

textarea {
    -webkit-appearance: none
}

select {
    -moz-appearance: menulist-text;
    /* Firefox */
    -webkit-appearance: menulist-text;
    /* Safari and Chrome */
    appearance: menulist-text;
}
/*
  POPUP이 오른쪽에서 열릴수 있도록 처리
*/
/* .popup{
  transform: translate3d(100vw,0,0);
}
.popup.modal-out{
  transform: translate3d(-100vw,0,0);
} */

/*
    구조 작업 Common Css Class
    fl                  : float left
    fr                  : float right
    clear               : float 초기화 클래스 float 해둔 부모에 적용.
    type-parent         : position:relative;
    type-child-center   : type-parent 안에 위치하는 자녀가 가운데로 위치
    type-child-left     : type-parent 안에 위치하는 자녀가 좌측으로 위치
    type-child-right    : type-parent 안에 위치하는 자녀가 우측으로 위치
    textellipsis        : 한줄 text가 영역을 벗어날 경우 줄임표(...) 표시
    muti_ellipis        : Muti Line ellipsis 처리(줄임표) Defult 2 text의 줄바꿈은 단어단위.
    ellipis3            : Muti Line ellipsis을 3줄로 증가
    ellipis4            : Muti Line ellipsis을 4줄로 증가
*/
.fl {
    float: left;
}

.fr {
    float: right;
}

.clear:after {
    display: table;
    overflow: hidden;
    height: 0 !important;
    clear: both;
    content: "";
}

.type-parent {
    position: relative;
}

.type-child-center {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}

.type-child-left {
    position: absolute;
    transform: translate(0, -50%);
    left: 0;
    top: 50%;
}

.type-child-right {
    position: absolute;
    transform: translate(0, -50%);
    right: 0;
    top: 50%;
}

.textellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

    .textellipsis > br {
        display: inline-block;
        content: " ";
        padding-right: 2px;
    }

.muti_ellipis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    word-break: keep-all;
}

.ellipis3 {
    -webkit-line-clamp: 3 !important;
}

.ellipis4 {
    -webkit-line-clamp: 4 !important;
}

/*
    2022-07-27 KSM
    custom input focus 색 변환을 위한 작업
    사용 예 :
    <div class="item-input-wrap custom-input-wrap lower-font">
        <input type="text" name="username" placeholder="이메일 아이디" />
    </div>
    framework7 기능중에 item-input-wrap을 적용하면 안에 input에 focus를 갈떄 .input-focused가 생기는 것을 응용하므로
    wrap div class에 item-input-wrap과 custom-input-wrap을 동시에 적용해야한다.
    크기 및 높이 색은 추가 Class로 각자 작업 필요.
*/
.custom-input-wrap {
    width: 100%;
    margin: auto;
    box-sizing: content-box;
    position: relative;
}

    .custom-input-wrap > input {
        width: 100%;
        height: 2.4rem;
        border: 0.05rem solid #ebebeb;
        border-radius: 0.2rem;
        background-color: white;
        padding: 0 0.8rem;
    }

    .custom-input-wrap > .input-focused {
        border: 0.05rem solid #ff6a02;
        caret-color: #ff6a02;
    }

    .custom-input-wrap > input::placeholder {
        color: #9d9d9d;
    }

/*
    2022-07-28 KSM
    custom input X버튼 활성화 및 기능 추가를 위한 작업
    사용 예 :
    <div class="item-input-wrap custom-input-wrap lower-font">
        <input type="text" class="username" name="username" placeholder="이메일 아이디" />
        <span class="input-clear-button custom-clear-button"></span>
    </div>
    framework7 기능중에 input-with-value가 input에 입력시 생성되는 것을 응용하므로 반드시 input-clear-button과 custom-clear-button이 span
    에 동시적용이 필요
    크기 및 높이 색은 추가 Class로 각자 작업 필요.
*/
.custom-clear-button {
    position: absolute;
    top: 50% !important;
    right: 0.75rem;
    transform: translate(0, -50%);
    margin: 0 !important;
}

.input-with-value + .custom-clear-button:after {
    content: "";
    width: 1rem;
    height: 1rem;
    background-image: url(../image/inputX.jpg);
    background-size: cover;
}

/******
    Custom Nochi Class
    기본적으로 framework7있는 safe-areas 가 아쉽게도 Pop에 적용이안되므로
    popup page의 .page 옆에 해당 클래스를 추가필요.
******/
.custom-safe-area {
    padding-top: constant(safe-area-inset-top) !important;
    padding-top: env(safe-area-inset-top) !important;
    padding-top: constant(safe-area-inset-bottom) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
}

/*******
    index bottom toolbar /navi custom
*******/
.toolbar-bottom:after {
    display: none !important;
}

.toolbar-bottom:before {
    display: none !important;
}

.tab-link-highlight {
    display: none !important;
}

.custom-icons {
    font-size: 1rem;
}

.center-cicle-plus {
    font-size: 2.5rem;
}

.tab-link-active {
    color: #ff6a02 !important;
}

.icon-custom-color {
    color: #1e1e1e !important;
}

.custom-title-navi {
    margin: 0 !important;
}

.navbar-bg:after {
    display: none !important;
}

.navbar-bg:before {
    display: none !important;
}

.person-notlogin-icon {
    font-size: 1.7rem !important;
}

.custom-title-navi-span {
    color: #1e1e1e !important;
}

.navbar-bg {
    background-color: #f7f7f7;
    opacity: 0.9;
}

.bgGray-page {
    background-color: #f0f1f3;
}

.list-block-custom {
    margin-top: 0.2rem;
    background-color: white;
    padding: 0.5rem 1rem;
}

.list-block-custom-right-open {
    margin-top: 0.2rem;
    background-color: white;
    padding: 0.5rem 0 0.5rem 0;
}

    .list-block-custom-right-open > .main-sub-title {
        padding-left: 1rem;
    }

    .list-block-custom-right-open > .swiper {
        padding-left: 1rem;
    }

.list-bold-title {
    margin-right: 0.2rem;
    color: #1e1e1e;
}

.list-sub-title {
    color: #9d9d9d;
}

.customer-link-navi {
    padding: 0 0.6rem;
    text-align: center;
}

.tab-link {
    padding: 0;
}

.center-footer {
    padding: 0 !important;
}

.custom-title-user-id {
    color: #1e1e1e !important;
}
/* Star Div css */
.popover-star-over {
    width: auto !important;
    padding: 1rem;
    background-color: white;
}

.star-popover-in {
    font-size: 1rem;
    padding: 0 0.1rem;
    color: #ff6a02;
}

.btn-field-popover {
    padding-top: 0.2rem;
    width: 100%;
}

.btn-popover-ok {
    background-color: #ff6a02;
    color: white;
    text-align: center;
    border-radius: 0.2rem;
}

.inspan-content-show {
    width: 100%;
}
/*steet post setting*/
.show-in-sheet {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    ;
    height: auto !important;
}

.show-div {
    padding: 0.3rem 0;
}
/*steet post setting end*/
/*common navbar Setup*/
.navbar-inner .left {
    width: 2rem;
}

.navbar-inner .title {
    width: 100%;
    text-align: center;
}

.navbar-inner .right {
    width: 2rem;
}

@keyframes fadeinUpCostom {
    from {
        opacity: 0;
        transform: translate3d(0,10%,0);
    }

    to {
        opacity: 1;
        transform: translateZ(0);
    }
}