/* poppins-regular - latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/poppins-v20-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('../fonts/poppins-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/poppins-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/poppins-v20-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/poppins-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/poppins-v20-latin-regular.svg#Poppins') format('svg'); /* Legacy iOS */
}

/* poppins-700 - latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/poppins-v20-latin-700.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('../fonts/poppins-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/poppins-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/poppins-v20-latin-700.woff') format('woff'), /* Modern Browsers */ url('../fonts/poppins-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/poppins-v20-latin-700.svg#Poppins') format('svg'); /* Legacy iOS */
}

body {
    background: #262626;
    background-image: url(/asset/img/back_table.jpg);
    background-position-x: center;
    background-repeat: no-repeat;
    background-size: 100vw 100vh;
    margin: 0;
    padding: 0;
}

div, section {
    font-family: 'Poppins', serif;
    color: #000333;
}

.img_machine {
    position: absolute;
    z-index: -2;
    bottom: 0;
    left: calc(50% - 250px);
    width: 500px;
}

.img_logo {
    position: absolute;
    z-index: -1;
    top: 20px;
    left: 40px;
    width: 150px;
    cursor: pointer;
}

.img_logo:hover {
    opacity: 0.9;
}

.translate {
    position: absolute;
    z-index: 1;
    top: 48px;
    right: 5px;
    width: 80px;
    height: 27px;
    font-size: 14px;
    border: 2px solid #18830e;
    background: #ffffff;
    color: #16810d;
    border-radius: 16px;
    text-align: center;
}

.box {
    width: 400px;
    height: 94vh;
    position: absolute;
    background: #fffc;
    border-radius: 5px;
    top: 3vh;
    right: 20px;
    box-shadow: 2px 3px 0px #40200a;
    text-align: center;
    overflow-y: scroll;
}

.img_cup {
    width: 80px;
    display: block;
    margin: 10px auto auto;
}

.btn_connect {
    position: absolute;
    top: 15px;
    right: 5px;
    width: 80px;
    height: 30px;
    border: 2px solid #18830e;
    border-radius: 20px;
    background: #69cc54;
    color: #fff;
    cursor: pointer;
}

.btn_connect:hover {
    background: #87fc7f;
}

.btn_disconnect {
    background: #bebebe;
    border-color: #dedede;
}

.btn_1 {
    background: url(/asset/img/btn1.png) no-repeat center transparent;
    border: none;
    width: 100%;
    height: 50px;
    background-size: 160px;
    cursor: pointer;
    font-weight: 700;
    color: #000;
}

.btn_1:hover {
    background-size: 170px;
}

.box_table_1 {
    width: 90%;
    padding: 0 15px;
    margin: auto;
    margin-top: 30px;
    font-weight: 700;
    color: #333;
}

.box_table_1 tbody tr td:first-child {
    text-align: left;
}

.box_table_1 tbody tr td:last-child {
    text-align: right;
}

.divider {
    margin: 10px auto;
    border-top: 1px solid #939393;
    width: 240px;
}

.brew_section .input-group {
    position: relative;
    width: 180px;
    margin: auto;
    margin-bottom: 10px;
}

.brew_section {
    padding: 10px 0px;
}

.brew_section_input {
    text-align: right;
    padding: 10px 40px 10px 0px;
    max-width: 200px;
    border-radius: 8px;
    border-color: #684700;
    border-style: double;
    display: block;
    margin: auto;
}

.brew_section_input_span {
    float: right;
    position: absolute;
    top: 9px;
    right: 6px;
    font-size: 14px;
}

.refer_input {
    width: 170px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 6px;
    height: 30px;
    padding: 0px 10px;
    border: 1px solid #8b8b8b;
    font-size: 10px;
}

.refer_btn {

}

.ref_link {
    font-weight: 700;
}

.ref_desc {
    font-size: 12px;
    padding: 0 50px;
}

.disclaimer_box {
    padding: 0 35px;
    font-size: 12px;
}

.bottom_link_box {
    margin-bottom: 50px;
}

.bottom_link_item {
    width: 100px;
    display: inline-block;
    border: 1px solid #000;
    margin-bottom: 5px;
    border-radius: 6px;
    font-size: 12px;
}

.bottom_link_item:hover {
    background: #fff;
    cursor: pointer;
}

.bottom_link_item i {
    font-size: 25px;
    margin-top: 8px;
}

.bottom_link_item div {
    margin-bottom: 5px;
    margin-top: 2px;
}

.popup {
    display: none;
    width: 600px;
    height: 90vh;
    position: absolute;
    background: #fffffff2;
    border-radius: 15px;
    top: 10px;
    left: calc(50% - 300px);
    padding: 30px;
    overflow: auto;
    z-index: 1;
    box-sizing: border-box;
    border: 2px solid #ccc;
}

.popup_close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 25px;
}

.popup_close:hover {
    opacity: 0.5;
}

.popup_box {
    overflow-y: auto;
    padding: 20px;
}

.h1 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}

.h3 {
    font-size: 15px;
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 10px;
}

.txt {
    font-size: 12px;
}

.popup_menu {
    text-align: right;
}

.popup_menu div {
    cursor: pointer;
}

.popup_menu div:hover {
    opacity: 0.5;
}

.grinder_box {
    display: none;
    position: fixed;
    top: calc(50% - 105px);
    left: calc(50% - 75px);
    width: 150px;
    height: 110px;
    overflow: hidden;
    border-radius: 10px;
    border: 2px solid #6c4737;
    box-sizing: border-box;
}

.grinder_box img {
    width: 100%;
}

.fee_info_box {
    font-size: 12px;
    font-weight: 300;
}

.fee_info_title {
    font-weight: 700;
    margin-bottom: 5px;
}

.timer_box{
    display:none;
    position: fixed;
    top: calc(50% - 100px);
    left: calc(50% - 150px);
    width: 300px;
    height: 160px;
    overflow: hidden;
    border-radius: 10px;
    border: 2px solid #6c4737;
    box-sizing: border-box;
    background: #ffffffd1;
}

ul#timer_ul {
    list-style: none;
    padding: 0;
    display: block;
    text-align: center;
    margin:0px;
}

ul#timer_ul li { display: inline-block; }

ul#timer_ul li span {
    font-size: 45px;
    font-weight: 300;
    line-height: 80px;
}

ul#timer_ul li.seperator {
    font-size: 30px;
    line-height: 70px;
    vertical-align: top;
}

ul#timer_ul li p {
    color: #a7abb1;
    font-size: 15px;
    margin:0px;
}

@media only screen and (max-width: 767px) {
    .img_machine {
        left: calc(50% - 200px);
        width: 400px;
    }

    .img_logo {
        top: 20px;
        left: 20px;
        width: 120px;
    }
}

@media only screen and (max-width: 563px) {
    .img_logo {
        top: 40px;
        left: 35px;
        width: 60px;
    }

    .box {
        width: auto;
        left: 20px;
        z-index: -2;
    }

    .popup {
        width: 90%;
        left: 5%;
        padding: 20px;
    }

    .popup_box {
        padding: 10px;
    }
}

@media only screen and (max-width: 420px) {
    .img_machine {
        left: calc(50% - 150px);
        width: 300px;
    }

    .popup {
        width: 90%;
        left: 5%;
        padding: 20px;
    }

    .popup_box {
        padding: 10px;
    }

}