/**
 * Copyright 2015 Google Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

html, body {
    font-family: 'Roboto', 'Helvetica', 'Noto Sans KR', 'NanumBarunGothic', sans-serif;

}

.demo-avatar {
    width: 48px;
    height: 48px;
    border-radius: 24px;
}

.demo-layout .mdl-layout__header .mdl-layout__drawer-button {
    color: rgba(0, 0, 0, 0.54);
}

.mdl-layout__drawer .avatar {
    margin-bottom: 16px;
}

.demo-drawer {
    border: none;
}

/* iOS Safari specific workaround */
.demo-drawer .mdl-menu__container {
    z-index: -1;
}

.demo-drawer .demo-navigation {
    z-index: -2;
}

/* END iOS Safari specific workaround */
.demo-drawer .mdl-menu .mdl-menu__item {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.demo-drawer-header {
    box-sizing: border-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 16px;
    height: 151px;
}

.demo-avatar-dropdown {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
}

.demo-navigation {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.demo-layout .demo-navigation .mdl-navigation__link {
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: rgba(255, 255, 255, 0.56);
    font-weight: 500;
}

.demo-layout .demo-navigation .mdl-navigation__link:hover {
    background-color: #00BCD4;
    color: #37474F;
}

.demo-navigation .mdl-navigation__link .material-icons {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.56);
    margin-right: 32px;
}

.demo-content {
    max-width: 1205px;
}

.demo-charts {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.demo-chart:nth-child(1) {
    color: #ACEC00;
}

.demo-chart:nth-child(2) {
    color: #00BBD6;
}

.demo-chart:nth-child(3) {
    color: #BA65C9;
}

.demo-chart:nth-child(4) {
    color: #EF3C79;
}

.demo-graphs {
    padding: 16px 32px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

/* TODO: Find a proper solution to have the graphs
 * not float around outside their container in IE10/11.
 * Using a browserhacks.com solution for now.
 */
_:-ms-input-placeholder, :root .demo-graphs {
    min-height: 664px;
}

_:-ms-input-placeholder, :root .demo-graph {
    max-height: 300px;
}

/* TODO end */
.demo-graph:nth-child(1) {
    color: #00b9d8;
}

.demo-graph:nth-child(2) {
    color: #d9006e;
}

.demo-cards {
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
}

.demo-cards .demo-separator {
    height: 32px;
}

.demo-cards .mdl-card__title.mdl-card__title {
    color: white;
    font-size: 24px;
    font-weight: 400;
}

.demo-cards ul {
    padding: 0;
}

.demo-cards h3 {
    font-size: 1em;
}

.demo-updates .mdl-card__title {
    min-height: 200px;
    background-image: url('images/dog.png');
    background-position: 90% 100%;
    background-repeat: no-repeat;
}

.demo-cards .mdl-card__actions a {
    color: #00BCD4;
    text-decoration: none;
}

.demo-options h3 {
    margin: 0;
}

.demo-options .mdl-checkbox__box-outline {
    border-color: rgba(255, 255, 255, 0.89);
}

.demo-options ul {
    margin: 0;
    list-style-type: none;
}

.demo-options li {
    margin: 4px 0;
}

.demo-options .material-icons {
    color: rgba(255, 255, 255, 0.89);
}

.demo-options .mdl-card__actions {
    height: 64px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    box-sizing: border-box;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

/**/

.mdl-button--raised.mdl-button--colored {
    background: #fff !important;
    color: #444444; /* height: 49px; */
    font-size: 16px;
    text-align: left;
    padding-left: 0px;
    margin-bottom: -7px;
}

.mdl-button {
    font-family: 'Roboto', 'Helvetica', 'Noto Sans KR', 'NanumBarunGothic', sans-serif;

}

.mdl-button:hover {
    background: #fff !important;
}

.mdl-list__item {
    font-family: 'Roboto', 'Helvetica', 'Noto Sans KR', 'NanumBarunGothic', sans-serif;
    font-size: 13px;
}

.mdl-card__supporting-text h6 {
    line-height: 0px;
    font-size: 13px;
}

.mdl-button--fab {
    border-radius: inherit;
    font-size: 24px;
    height: 35px;
    margin: auto;
    min-width: 35px;
    width: 35px;
    line-height: normal;
    background: #efd148 !important;
    color: #fff !important;
}

.mdl-button--fab:hover {
    background: #efd148 !important;
}

.mdl-list {
    display: block;
    padding: 0px 0;
    list-style: none;
}

.mdl-layout--fixed-drawer > .mdl-layout__content {
    margin-left: 240px;
    padding: 20px 0px 00px;
}

.mdl-button--accent.mdl-button--accent.mdl-button--raised, .mdl-button--accent.mdl-button--accent.mdl-button--fab {
    background: #666 !important;
    color: #fff !important;
    border: 1px solid #666;
}

.mdl-button__ripple-container { /* background:#38a880 !important; *//* background: #fff; *//* color: rgb(266,266,266) !important; */
}

.mdl-shadow--2dp {
    box-shadow: none !important;
    border-radius: 5px;
    padding: 40px 53px;
}

.mdl-button--raised {
    background: #38a880 !important;
    box-shadow: none !important;
}

.mdl-badge[data-badge]:after {
    background: #efc817 !important;
    color: #fff;
}

h5, h6 {
    font-family: 'Roboto', 'Helvetica', 'Noto Sans KR', 'NanumBarunGothic', sans-serif;
    font-size: 14px;
}

.mdl-textfield__input {
    font-family: 'Roboto', 'Helvetica', 'Noto Sans KR', 'NanumBarunGothic', sans-serif;
}

.mdl-button {
    font-size: 13px;
    color: #fff;
    background: #38a880;
}

.mdl-button--primary.mdl-button--primary {
    color: #888;
    background: none;
}

.mdl-button--accent.mdl-button--accent {
    color: #888;
    background: none;
}

.mdl-data-table {
    border-radius: 5px !important;
}

.mdl-data-table th {
    color: #fff;
    text-align: center !important;
    background: #3aab83;
    border-right: 1px solid #e1e1e1;
}

.mdl-data-table td {
    text-align: center;
    border-right: 1px solid #e1e1e1;
}

.mdl-data-table__cell--non-numeric.mdl-data-table__cell--non-numeric {
    text-align: center;
}

.key_list {
}

.key_list li {
    background: #f8f8f8;
    border-radius: 5px;
}

.btn {
}

.login {
    background: none;
    width: 360px;
    text-align: center;
    margin-left: 0px;
    padding-left: 0px;
}

.login .mdl-card__title {
    background: #f5f5f5 !important;
    padding: 0px;
    margin-bottom: 25px;
}

.login .mdl-card__title-text {
    text-align: center;
    width: 100%;
    display: block;
}

.login .mdl-textfield {
    width: auto;
    max-width: 100%;
}

.login input {
    width: 342px;
    height: 56px;
    border: 5px;
    padding: 0px;
    line-height: 56px;
    padding-left: 10px;
    background: #e4e4e4 !important;
    box-sizing: border-box;
    margin-right: 0px;
    border-radius: 5px;
    font-size: 18px;
}

.log_btn {
}

.log_btn #btn-submit {
    width: 100%;
    border: none;
    height: 56px;
    background: #5db594;
    color: #fff;
    border-radius: 5px;
}

.log_txt {
    text-align: center;
    margin-top: 25px;
}

.log_txt #btn-join, #btn-find {
    border: navajowhite;
    background: none;
    text-decoration: underline;
    padding: 0px;
    color: #228b64;
    margin-left: 7px;
    cursor: pointer;
}

.mdl-card__supporting-text {
    width: 100%;
    padding-left: 10px !important;
}

.login .mdl-textfield {
    padding: 0px;
    margin-bottom: 6px;
}

.mdl-textfield__label {
    left: 11px;
    top: 30px;
}

.mdl-textfield__label:after {
    border: none;
    background: none;
}

.mdl-card__supporting-text {
    padding: 0px;
}

.mdl-card__actions.mdl-card--border {
    border-top: none; /* margin-top: 0px; */
    padding: 0px;
    width: 342px;
    margin: 0 auto;
    padding-top: 2px;
}

.f_l {
    float: right;
}

.btn {
    border: none;
    background: none;
    /* line-height: 35px; */
    /* border: 1px solid #e1e1e1; */
    /* border-radius: 5px; */
    /* padding: 5px 15px; */
    /* background:#f1f1f1; */
    /* margin-right:6px; */
    /* background: #fe7a3f; */
    /* color: #fff; */
}

.btn i {
    vertical-align: middle;
    margin-right: 3px;
}

.btn01 {
}

.btn02 {
}

.btn03 {
}

i {
    margin-right: 3px;
}

.btn04 {
    background: #38a880 !important;
    color: #fff !important;
    padding-left: 13px;
    width: 92px;
}

.btn05 {
    background: #888 !important;
    /* width: 100px; */
    min-width: 59px;
    width: 95px;
    padding-left: 9px;
}

.btn06 {
    background: #999 !important;
    color: #fff !important;
    padding-left: 13px;
    width: 110px;
    margin: 0px;
    margin-left: 10px;
}

.btn07 {
    background: #fff !important;
    /* width: 100px; */
    min-width: 59px;
    width: 110px;
    padding-left: 9px;
    color: #666 !important;
    border: 1px solid #e1e1e1;
    margin: 0px;
    margin-left: 10px;
}

.btn08 {
    background: #999 !important;
    color: #fff !important;
}

.btn10 {
    background: #999 !important;
    color: #fff !important;
    margin: 0px;
    padding-left: 11px;
}

.btn04:hover, .btn05:hover, .btn06:hover, .btn07:hover, .btn08:hover, .btn09:hover, .btn10:hover {
    background: #d7d7d7 !important;
    color: #fff !important;
}

.pager {
    padding-top: 10px;
    padding-left: 0px;
}

.pager li {
    margin: 0 1.5px;
}

.pager .pp {
    width: 38px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: none !important;
    border: 1px solid #e1e1e1;
    color: #888 !important;
    cursor: pointer;
}

.al_w {
    text-align: left;
}

.pr {
    position: relative;
}

.pa0 {
    /* position: absolute; */
    /* top: 41px; */
    /* right: 53px; */
    /* width: 400px; */
}

.mdl-textfield__input {
    border-bottom: none;
    background: #f8f8f8;
    padding: 10px; /* border-radius: 10px; *//* border: 1px solid #e1e1e1; */
    width: 100%;
    box-sizing: border-box;
}

.text {
    text-align: left !important;
}

.text h4 {
    color: #38a880;
    margin: 11px 0 10px;
}

.text h5 {
    margin: 0px 0 0px;
}

.text h6 {
    margin: 5px 0 0px;
}

#chart1, #chart2 {
    margin-top: 15px;
}

.mdl-chip__text {
    padding-left: 19px;
}

.t30 {
    top: 30px !important;
}

.demo-header {
    display: none;
}

.copy {
    text-align: center;
    /* padding-left: 240px; */
    padding-top: 20px;
    padding-bottom: 20px;
    background: #fff;
    font-size: 13px;
    margin-top: 50px;
    color: #999;
    border-top: 1px solid #e1e1e1;
}

.copy span {
    display: inline-block;
    margin: 0 10px;
}

/*반응형*/

@media screen and (max-width: 768px) {

    .mo {
        display: none;
    }

    .mdl-layout--fixed-drawer > .mdl-layout__content {
        margin-left: 0px;
    }

    .mdl-shadow--2dp {
        padding: 0px;
    }

    .mdl-grid {
        padding: 0px;
        border-radius: 0px;
    }

    .mdl-data-table td:first-of-type, .mdl-data-table th:first-of-type {
        padding-left: 0px;
    }

    .mdl-data-table {
        white-space: normal;
    }

    .mtb {
        display: inline-block;
        vertical-align: top;
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        border-collapse: collapse;
        border-spacing: 0;
    }

    .mdl-data-table td:last-of-type, .mdl-data-table th:last-of-type {
        padding-right: 0px;
    }

    .mdl-data-table td {
        padding: 5px !important;
    }

    .mdl-chip {
        white-space: normal;
        height: auto;
        line-height: 20px;
        background: none;
    }

    .mdl-chip__text {
        padding-left: 0px;
    }

    .mdl-data-table th {
        padding: 5px !important;
        height: auto;
    }

    .mdl-layout__drawer-button {
    }

    .m_logo {
        text-align: center;
        line-height: 56px;
    }

    .m_logo img {
        width: 100px;
    }

    .m_logout {
        position: absolute;
        top: 0px;
        right: 0px;
        height: 56px;
        line-height: 56px;
        padding: 0px 13px;
    }

    .demo-header {
        box-shadow: none;
        background: #fff !important;
    }

    .mdl-button--raised.mdl-button--colored {
        margin-bottom: -7px;
    }

    .mt10 {
        top: 10px !important;
    }

    .ml_00 {
        position: relative;
    }

    .ml_btn {
        position: absolute;
        top: 45px;
        right: 8px;
        width: 35px;
    }

    .mdl-textfield {
        padding: 0px;
    }

    .mdl-card__supporting-text {
        padding: 10px !important;
        margin-left: 10px;
    }

    .mdl-card__supporting-text h6 {
        white-space: normal;
        line-height: 19px;
        margin: 5px 0 3px;
    }

    .m10 {
        margin-left: 0px;
        padding: 0px !important;
    }

    .login input {
        width: 300px;
    }

    .mdl-card__actions.mdl-card--border {
        width: 300px;
    }

    .mdl-tabs__panel {
        width: 100%;
    }

    .copy {
        padding-left: 0px
    }

    .min-h {
        min-height: auto !important;
    }

}

.min-h {
    min-height: 850px;
}

/*결제완료*/

.rtb {
    border-top: 1px solid #e1e1e1;
    border-left: 1px solid #e1e1e1;
    width: 100%;
}

.rtb th {
    padding: 10px 30px;
    border-right: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    color: #fff;
    text-align: center !important;
    background: #3aab83;
    border-right: 1px solid #e1e1e1;
}

.rtb td {
    padding: 20px 30px;
    border-right: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
}

.rtb .dd {
    background: #f8f8f8;
    text-align: center;
    font-size: 18px;
    padding: 30px;
}

.rtb b {
    margin-right: 10px;
}

/*
<div>Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
*/

.join_modal .m_btn{padding:10px;}
.join_modal{
    height: 600px;
    overflow: scroll;
    width: 1200px !important;
    max-width: 100% !important;
}
.join_cl{
    width: 200px;
    margin: 0 auto;
    display: block;
    margin-right: auto !important;
}
.join_cl:hover{background:#e1e1e1 !important}
.join_modal .mdl-textfield{width:100%;}
.j_btn{
    color: #5db594;}
@media screen and (max-width: 768px) {
    .join_modal{
        padding: 20px !important;
    }
    .join_cl{}

}



/*회원탈퇴*/

.out{}
.out .mdl-dialog__txt{text-align: left;line-height: 17px;margin-top: 10px;margin-bottom: 20px;}
.out textarea{padding: 18px;border: 1px solid #e1e1e1;}
.out .mdl-dialog__content{
    padding: 0px;
    margin: 0px;
}

@media screen and (max-width: 768px) {
    .out .mdl-dialog__content{width:100% !important}
    .cs{margin:0 auto; margin-bottom:20px}
}

.out_btn{width:200px;text-align:center;border:none;background: #3aab83;color: #fff;line-height: 40px;margin: 20px auto;display: block;}
.out_box{padding:10px;width:100%;box-sizing: border-box;border: 1px solid #e1e1e1;margin-bottom: 10px;}



.cs{background: url("/images/cs.png");background-repeat: no-repeat;border: 1px solid #e1e1e1;width: 198px;border-radius: 20px;padding: 10px;text-align: center;background-position: 20px 10px;padding-left: 35px;background-color: #f8f8f8;}



/*비밀번호 찾기*/

.pass_wrap{
    background: #fff;
    padding: 50px 20px;
    border-radius: 15px;
    text-align: center;
    width: 300px;
    /* box-sizing: border-box; */
}
.pass_wrap .img{}
.pass_wrap .txt{
    margin: 0px;
}