@font-face {
    font-family: 'DB Heavent Bold It';
    src: url('DBHeavent-BoldIt.woff2') format('woff2'),
        url('DBHeavent-BoldIt.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Heavent Bold Cond It';
    src: url('DBHeavent-BoldCondIt.woff2') format('woff2'),
        url('DBHeavent-BoldCondIt.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Heavent Bold Cond';
    src: url('DBHeavent-BoldCond.woff2') format('woff2'),
        url('DBHeavent-BoldCond.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Heavent Cond';
    src: url('DBHeavent-Cond.woff2') format('woff2'),
        url('DBHeavent-Cond.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Heavent';
    src: url('DBHeavent-Black.woff2') format('woff2'),
        url('DBHeavent-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Heavent Black It';
    src: url('DBHeavent-BlackIt.woff2') format('woff2'),
        url('DBHeavent-BlackIt.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Heavent';
    src: url('DBHeavent-Bold.woff2') format('woff2'),
        url('DBHeavent-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Heavent Cond It';
    src: url('DBHeavent-CondIt.woff2') format('woff2'),
        url('DBHeavent-CondIt.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Heavent Black Cond It';
    src: url('DBHeavent-BlackCondIt.woff2') format('woff2'),
        url('DBHeavent-BlackCondIt.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Heavent Black Cond';
    src: url('DBHeavent-BlackCond.woff2') format('woff2'),
        url('DBHeavent-BlackCond.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Heavent';
    src: url('DBHeavent-Italic.woff2') format('woff2'),
        url('DBHeavent-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DB Heavent Light It';
    src: url('DBHeavent-LightIt.woff2') format('woff2'),
        url('DBHeavent-LightIt.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Heavent Med Cond It';
    src: url('DBHeavent-MedCondIt.woff2') format('woff2'),
        url('DBHeavent-MedCondIt.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Heavent Light Cond';
    src: url('DBHeavent-LightCond.woff2') format('woff2'),
        url('DBHeavent-LightCond.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Heavent Light Cond It';
    src: url('DBHeavent-LightCondIt.woff2') format('woff2'),
        url('DBHeavent-LightCondIt.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Heavent';
    src: url('DBHeaventt-Light.woff2') format('woff2'),
        url('DBHeaventt-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Heavent Thin Cond It';
    src: url('DBHeavent-ThinCondIt.woff2') format('woff2'),
        url('DBHeavent-ThinCondIt.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Heavent Thin It';
    src: url('DBHeavent-ThinIt.woff2') format('woff2'),
        url('DBHeavent-ThinIt.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Heavent Med Cond';
    src: url('DBHeavent-MedCond.woff2') format('woff2'),
        url('DBHeavent-MedCond.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Heavent Thin Cond';
    src: url('DBHeavent-ThinCond.woff2') format('woff2'),
        url('DBHeavent-ThinCond.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Heavent Med It';
    src: url('DBHeavent-MedIt.woff2') format('woff2'),
        url('DBHeavent-MedIt.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Heavent Med';
    src: url('DBHeavent-Med.woff2') format('woff2'),
        url('DBHeavent-Med.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Heavent';
    src: url('DBHeavent.woff2') format('woff2'),
        url('DBHeavent.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Helvethaica X Blk Cond';
    src: url('DBHelvethaicaX-BlkCondIt.woff2') format('woff2'),
        url('DBHelvethaicaX-BlkCondIt.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Heavent UltraLi';
    src: url('DBHeavent-UltraLi.woff2') format('woff2'),
        url('DBHeavent-UltraLi.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Helvethaica X 75 Bd';
    src: url('DBHelvethaicaX-75Bd.woff2') format('woff2'),
        url('DBHelvethaicaX-75Bd.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Heavent UltraLi Cond It';
    src: url('DBHeavent-UltraLiCondIt.woff2') format('woff2'),
        url('DBHeavent-UltraLiCondIt.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Heavent UltraLi Cond';
    src: url('DBHeavent-UltraLiCond.woff2') format('woff2'),
        url('DBHeavent-UltraLiCond.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Heavent UltraLi It';
    src: url('DBHeavent-UltraLiIt.woff2') format('woff2'),
        url('DBHeavent-UltraLiIt.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Heavent';
    src: url('DBHeavent-Thin.woff2') format('woff2'),
        url('DBHeavent-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Helvethaica X Li Cond';
    src: url('DBHelvethaicaX-LiCond.woff2') format('woff2'),
        url('DBHelvethaicaX-LiCond.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Helvethaica X Cond';
    src: url('DBHelvethaicaX-Cond.woff2') format('woff2'),
        url('DBHelvethaicaX-Cond.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Helvethaica X Blk Ext';
    src: url('DBHelvethaicaX-BlkExt.woff2') format('woff2'),
        url('DBHelvethaicaX-BlkExt.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Helvethaica X Ext';
    src: url('DBHelvethaicaX-Ext.woff2') format('woff2'),
        url('DBHelvethaicaX-Ext.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Helvethaica X 47 LiCond';
    src: url('DBHelvethaicaX-47LiCond.woff2') format('woff2'),
        url('DBHelvethaicaX-47LiCond.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Helvethaica X 44 LiExtIt';
    src: url('DBHelvethaicaX-44LiExtIt.woff2') format('woff2'),
        url('DBHelvethaicaX-44LiExtIt.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Helvethaica X Blk';
    src: url('DBHelvethaicaX-Blk.woff2') format('woff2'),
        url('DBHelvethaicaX-Blk.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Helvethaica X 48 LiCondIt';
    src: url('DBHelvethaicaX-48LiCondIt.woff2') format('woff2'),
        url('DBHelvethaicaX-48LiCondIt.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Helvethaica X 65 Med';
    src: url('DBHelvethaicaX-65Med.woff2') format('woff2'),
        url('DBHelvethaicaX-65Med.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Helvethaica X Med Cond';
    src: url('DBHelvethaicaX-MedCond.woff2') format('woff2'),
        url('DBHelvethaicaX-MedCond.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Helvethaica X Li Ext';
    src: url('DBHelvethaicaX-LiExt.woff2') format('woff2'),
        url('DBHelvethaicaX-LiExt.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Helvethaica X Thin Cond';
    src: url('DBHelvethaicaX-ThinCond.woff2') format('woff2'),
        url('DBHelvethaicaX-ThinCond.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Helvethaica X';
    src: url('DBHelvethaicaX-Thin.woff2') format('woff2'),
        url('DBHelvethaicaX-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Helvethaica X Med';
    src: url('DBHelvethaicaX-Med.woff2') format('woff2'),
        url('DBHelvethaicaX-Med.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Helvethaica X Thin Ext';
    src: url('DBHelvethaicaX-ThinExt.woff2') format('woff2'),
        url('DBHelvethaicaX-ThinExt.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Helvethaica X 45 Li';
    src: url('DBHelvethaicaX-45Li.woff2') format('woff2'),
        url('DBHelvethaicaX-45Li.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Helvethaica X 43 LiExt';
    src: url('DBHelvethaicaX-43LiExt.woff2') format('woff2'),
        url('DBHelvethaicaX-43LiExt.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Helvethaica X 46 LiIt';
    src: url('DBHelvethaicaX-46LiIt.woff2') format('woff2'),
        url('DBHelvethaicaX-46LiIt.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Helvethaica X UlLi Cond';
    src: url('DBHelvethaicaX-UlLiCond.woff2') format('woff2'),
        url('DBHelvethaicaX-UlLiCond.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Helvethaica X Li';
    src: url('DBHelvethaicaX-Li.woff2') format('woff2'),
        url('DBHelvethaicaX-Li.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Helvethaica X Med Ext';
    src: url('DBHelvethaicaX-MedExt.woff2') format('woff2'),
        url('DBHelvethaicaX-MedExt.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Helvethaica X Reg';
    src: url('DBHelvethaicaX-Reg.woff2') format('woff2'),
        url('DBHelvethaicaX-Reg.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB HelvethaicaMon X 75 Bd';
    src: url('DBHelvethaicaMonX-75Bd.woff2') format('woff2'),
        url('DBHelvethaicaMonX-75Bd.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB HelvethaicaMon X 78 BdCondIt';
    src: url('DBHelvethaicaMonX-78BdCondIt.woff2') format('woff2'),
        url('DBHelvethaicaMonX-78BdCondIt.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB HelvethaicaMon X 76 BdIt';
    src: url('DBHelvethaicaMonX-76BdIt.woff2') format('woff2'),
        url('DBHelvethaicaMonX-76BdIt.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB HelvethaicaMon X 77 BdCond';
    src: url('DBHelvethaicaMonX-77BdCond.woff2') format('woff2'),
        url('DBHelvethaicaMonX-77BdCond.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Helvethaica X UlLi';
    src: url('DBHelvethaicaX-UlLi.woff2') format('woff2'),
        url('DBHelvethaicaX-UlLi.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Helvethaica X UlLi Ext';
    src: url('DBHelvethaicaX-UlLiExt.woff2') format('woff2'),
        url('DBHelvethaicaX-UlLiExt.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB HelvethaicaMon X 86 BlkIt';
    src: url('DBHelvethaicaMonX-86BlkIt.woff2') format('woff2'),
        url('DBHelvethaicaMonX-86BlkIt.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB HelvethaicaMon X 85 Blk';
    src: url('DBHelvethaicaMonX-85Blk.woff2') format('woff2'),
        url('DBHelvethaicaMonX-85Blk.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* body_title_dca */
.body_title_dca {
    /* background-image: url("../images/test-bg.jpg"); */
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container_icon_title {
    display: flex;
    justify-content: center;
}

.icon_title {
    position: fixed;
    left: 10%;
    top: 20%;
    width: 80%;
    z-index: 2;

}

.logo_title {
    position: fixed;
    width: 30%;
    top: 20px;
    right: 0px;
    z-index: 1;

}

#btn_submit {
    position: fixed;
    bottom: 4%;
    right: 3%;
    z-index: 2;
    left: 100%;
    cursor: pointer;
}

.bg-option-dca {
    position: fixed;
    z-index: 1;
}

.btn-start {
    width: 20%;
    position: fixed;
    z-index: 3;
    bottom: 27%;
    left: 40%;
    cursor: pointer;
}

.btn-option-dca {
    width: 17%;
    position: fixed;
    bottom: 2.5%;
    right: 5%;
    z-index: 2;
    cursor: pointer;
}

.bg-detail-dca {
    position: fixed;
    z-index: 0;

}

.btn-next-month {
    width: 17%;
    position: fixed;
    z-index: 1;
    bottom: 80%;
    left: 13.8%;
    cursor: pointer;
}

.btn-result {
    width: 17%;
    position: fixed;
    z-index: 1;
    bottom: 80%;
    left: 13.8%;
    cursor: pointer;
}

.btn-last-month {
    width: 17%;
    position: fixed;
    z-index: 1;
    bottom: 75%;
    left: 13.8%;
    cursor: pointer;
}

.bg-sum-dca {
    z-index: 0;
    position: fixed;
    width: 100%;
    height: 100%;
}

.btn-home-dca {
    width: 17%;
    position: fixed;
    z-index: 1;
    right: 78%;
    top: 93%;
    cursor: pointer;
}

.btn-again-dca {
    width: 17%;
    position: fixed;
    z-index: 1;
    right: 5%;
    top: 93%;
    cursor: pointer;
}

.range {
    display: flex;
    width: 40%;
    z-index: 5;
}


.range__value input {
    font-family: 'DB Helvethaica X Blk';
    font-size: 7vw;
    text-align: center;
    position: fixed;
    top: 11.8%;
    left: 16%;
    border: 0;
    width: 20%;
    z-index: 5;
    background: no-repeat;

}

.form-group {
    position: fixed;
    top: 19.5%;
    left: 16.5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 20%;
    z-index: 5;
}


.range__slider [type="range"] {
    width: 130%;
    -webkit-appearance: none;
    height: 1.8vw;
    border-radius: 6px;
    background: #f1f1f1;
    border: #222 0.5vw solid;
    border-bottom: #222 0.75vw solid;
    outline: none;
    padding: 0;
    margin: 0;
    z-index: 5;
}

/* custom thumb */
.range__slider [type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 4.5vw;
    height: 4.5vw;
    border-radius: 50%;
    background: radial-gradient(circle, yellow, orange);
    border: #222 0.3vw solid;
    border-bottom: #222 0.75vw solid;
    border-right: #222 0.75vw solid;
    cursor: pointer;

    z-index: 5;
}


.range__slider [type="range"]::-moz-range-thumb {
    appearance: none;
    width: 4.5vw;
    height: 4.5vw;
    border-radius: 50%;
    background: radial-gradient(circle, yellow, orange);
    border: #222 0.3vw solid;
    border-bottom: #222 0.75vw solid;
    border-right: #222 0.75vw solid;
    cursor: pointer;

    z-index: 5;
}

.range__slider [type="range"]::-moz-range-thumb:hover {
    background: #f9ca24;
    z-index: 5;
}

/* remove border */
input::-moz-focus-inner,
input::-moz-focus-outer {
    border: 0;
    z-index: 5;
}



p {
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    line-height: 30px;
    color: var(--white);
    letter-spacing: 1px;
    font-weight: 500;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear;
}


.section {
    position: relative;
    width: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    top: -10%;
    right: 17.4%;
}

.over-hide {
    overflow: hidden;
}

.z-bigger {
    z-index: 100 !important;
}



.checkbox:checked~.background-color {
    background-color: var(--white);
}


[type="checkbox"]:checked,
[type="checkbox"]:not(:checked),
[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;

    width: 0;
    height: 0;
    visibility: hidden;
}


.checkbox-tools:checked+label,
.checkbox-tools:not(:checked)+label {
    /* position: relative;
    display: inline-block;
    text-align: center;
    width: 5vw;
    height: 5vw;
    font-size: 4vw;
    font-family: 'DB Helvethaica X 65 Med';
    letter-spacing: 1px;
    margin: 0 auto;
    margin-left: 1px;
    margin-right: 4px;
    margin-bottom: 10px;
    text-align: center;
    border-radius: 50px;
    overflow: hidden;
    cursor: pointer;
    text-transform: uppercase;
    color: black;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear; */
    position: relative;
    display: inline-block;
    text-align: center;
    width: 6vw;
    height: 5.8vw;
    font-size: 4vw;
    font-family: 'DB Helvethaica X 65 Med';
    letter-spacing: 1px;
    margin: 0 auto;
    margin-bottom: 10px;
    text-align: center;
    border-radius: 50px;
    overflow: hidden;
    cursor: pointer;
    text-transform: uppercase;
    color: black;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear;
    padding-left: 0.5px
}

.checkbox-tools:not(:checked)+label {
    background-color: rgb(211, 211, 211);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}





.checkbox-tools:checked+label::before,
.checkbox-tools:not(:checked)+label::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f7ae5b;
    z-index: -1;
}









/* ------- */

.share {
    position: fixed;
    z-index: 9;
    left: 45%;
    top: 25%;
    width: 60%;
    z-index: 10;
}

.share2 {
    position: fixed;
    z-index: 9;
    left: 46%;
    top: 48%;
    width: 35%;
}

.share3 {
    position: fixed;
    z-index: 8;
    left: 45%;
    top: 25%;
    width: 60%;
}

.share_img1 {
    position: fixed;
    left: 10%;
    width: 18%;
    top: 65%;
    cursor: pointer;
    z-index: 999;
}

.share_img2 {
    position: fixed;
    top: 65%;
    width: 20%;
    left: 32%;
    cursor: pointer;
}

.share_img3 {
    position: fixed;
    top: 66%;
    width: 15%;
    left: 56%;
    cursor: pointer;
}

.share_img4 {
    position: fixed;
    top: 66.5%;
    width: 15%;
    left: 75%;
    cursor: pointer;
}

.share_img5 {
    position: fixed;
    top: 80%;
    width: 16%;
    left: 10%;
    cursor: pointer;
}

.share_img6 {
    position: fixed;
    top: 79%;
    width: 15%;
    left: 34%;
    cursor: pointer;
}

.share_img7 {
    position: fixed;
    top: 80%;
    width: 15%;
    left: 56%;
    cursor: pointer;
}

.share_img8 {
    position: fixed;
    top: 80%;
    width: 15%;
    left: 76%;
    cursor: pointer;
}

@keyframes zoom-in-zoom-out {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.2, 1.2);
    }

    100% {
        transform: scale(1, 1);
    }
}

.share_img1-1 {
    position: fixed;
    top: 74%;
    left: 11%;
    width: 14%;
    cursor: pointer;
}

.share_img2-1 {
    position: fixed;
    top: 74.5%;
    left: 34%;
    width: 16%;
    cursor: pointer;
}

.share_img3-1 {
    position: fixed;
    top: 74.5%;
    left: 54%;
    width: 19%;
    cursor: pointer;
}

.share_img4-1 {
    position: fixed;
    top: 74.5%;
    left: 77%;
    width: 12%;
    cursor: pointer;
}

.share_img5-1 {
    position: fixed;

    cursor: pointer;
    top: 88%;
    left: 9%;
    width: 20%;
}

.share_img6-1 {
    position: fixed;

    cursor: pointer;
    top: 88%;
    left: 34%;
    width: 16%;
}

.share_img7-1 {
    position: fixed;
    width: 21%;
    cursor: pointer;
    top: 88%;
    left: 53%;
}

.share_img8-1 {
    position: fixed;
    width: 20%;
    cursor: pointer;
    top: 88%;
    left: 72.5%;
}

.share_img1-2 {
    position: fixed;
    width: 18%;
    top: 64.5%;
    left: 8.5%;
    cursor: pointer;
    animation: zoom-in-zoom-out 1.5s ease infinite;
}

.share_img2-2 {
    position: fixed;
    width: 18%;
    top: 64.5%;
    left: 32.5%;
    cursor: pointer;
    animation: zoom-in-zoom-out 1.5s ease infinite;
}

.share_img3-2 {
    position: fixed;
    width: 18%;
    top: 64.5%;
    left: 54%;
    cursor: pointer;
    animation: zoom-in-zoom-out 1.5s ease infinite;
}

.share_img4-2 {
    position: fixed;
    width: 18%;
    top: 64.5%;
    left: 73%;
    cursor: pointer;
    animation: zoom-in-zoom-out 1.5s ease infinite;
}

.share_img5-2 {
    position: fixed;
    width: 18%;
    top: 79.5%;
    left: 8.5%;
    cursor: pointer;
    animation: zoom-in-zoom-out 1.5s ease infinite;
}

.share_img6-2 {
    position: fixed;
    width: 18%;
    top: 79.5%;
    left: 32.5%;
    cursor: pointer;
    animation: zoom-in-zoom-out 1.5s ease infinite;
}

.share_img7-2 {
    position: fixed;
    width: 18%;
    top: 79%;
    left: 54%;
    cursor: pointer;
    animation: zoom-in-zoom-out 1.5s ease infinite;
}

.share_img8-2 {
    position: fixed;
    width: 18%;
    top: 79%;
    left: 73.5%;
    cursor: pointer;
    animation: zoom-in-zoom-out 1.5s ease infinite;
}

/* detail */
.month {
    position: fixed;
    font-family: 'DB Helvethaica X Blk';
    font-size: 4vw;
    color: white;
    left: 19%;
    top: 7%;
}

.day {
    position: fixed;
    font-family: 'DB Helvethaica X Blk';
    font-size: 7vw;
    color: black;
    left: 18.7%;
    top: 9%;
}

.share_total {

    position: fixed;
    text-align: end;
    font-family: 'DB Helvethaica X Blk';
    font-size: 10vw;
    color: black;
    left: 55%;
    bottom: 79.8%;
    width: 28%;
}

.share_aver {

    position: fixed;
    text-align: end;
    font-family: 'DB Helvethaica X Blk';
    font-size: 9vw;
    color: black;
    left: 55%;
    bottom: 69%;
    width: 28%;
}

.share_total2 {

    position: fixed;
    text-align: end;
    font-family: 'DB Helvethaica X Blk';
    font-size: 10vw;
    color: black;
    left: 55%;
    bottom: 79.7%;
    width: 28%;
}

.share_aver2 {

    position: fixed;
    text-align: end;
    font-family: 'DB Helvethaica X Blk';
    font-size: 9vw;
    color: black;
    left: 55%;
    bottom: 69.2%;
    width: 28%;
}

.header {
    position: fixed;
    font-family: 'DB Helvethaica X 75 Bd';
    font-size: 3.4vw;
    color: black;
    left: 5.5%;
    top: 33%;
}

.eng {
    font-family: 'DB Heavent';
}

.market_price {

    text-align: end;
    position: fixed;
    font-family: 'DB Helvethaica X Blk';
    font-size: 10vw;
    color: black;
    left: 41.3%;
    bottom: 12.5%;
    width: 30%;
}

.share_volume {

    text-align: end;
    position: fixed;
    font-family: 'DB Helvethaica X Blk';
    font-size: 10vw;
    color: black;
    left: 41.3%;
    bottom: 6.3%;
    width: 30%;

}

.myChart {
    position: fixed;
    width: 90%;
    left: 4%;
    z-index: 9;
    top: 45%;
}



/* -------- */

/* result */
.result_dca_bg {
    position: fixed;
    width: 100%;
    height: 100%;
}

.result_dca_icon {
    position: fixed;
    width: 120%;

}

.result_share {
    text-align: center;
    position: fixed;
    width: 50%;
    top: 48%;
    left: 21%;
    font-family: 'DB Helvethaica X Blk';
    font-size: 15vw;
    color: #00AC50;
    -webkit-text-stroke: 0.6vw black;

}

/* ----------- */

/* sum */
.myChart2 {
    position: fixed;
    width: 87%;
    left: 4%;
    z-index: 9;
    top: 45%;
}

.money_total {
    text-align: end;
    width: 25%;
    position: fixed;
    font-family: 'DB Helvethaica X Blk';
    font-size: 6vw;
    color: black;
    left: 41.5%;
    bottom: 16%;
}

.market_total {
    text-align: end;
    width: 25%;
    position: fixed;
    font-family: 'DB Helvethaica X Blk';
    font-size: 6vw;
    color: black;
    left: 41.5%;
    bottom: 12.1%;
}


.closing_price {
    text-align: end;
    width: 25%;
    position: fixed;
    font-family: 'DB Helvethaica X Blk';
    font-size: 6vw;
    color: black;
    left: 40.5%;
    bottom: 8.1%;
}

.gain {

    text-align: center;
    position: fixed;
    font-family: 'DB Helvethaica X Blk';
    font-size: 4vw;
    color: black;
    bottom: 23.8%;
    right: 6.2%;
    width: 20%;
    z-index: 15;
}

.gain_percent {

    text-align: center;
    position: fixed;
    font-family: 'DB Helvethaica X Blk';
    font-size: 5vw;
    bottom: 20.5%;
    right: 6.2%;
    width: 20%;
    z-index: 15;
    color: #02AB52;
}

.text-baht {

    position: fixed;
    z-index: 9;
    width: 5%;
    left: 10.5%;
    top: 45%
}

.text-month {
    position: fixed;
    z-index: 9;
    width: 6%;
    left: 90%;
    top: 64.5%
}

.text-baht2 {

    position: fixed;
    z-index: 9;
    width: 6%;
    left: 9%;
    top: 43.5%
}

.text-month2 {
    position: fixed;
    z-index: 9;
    width: 7%;
    left: 88.5%;
    top: 63.5%
}

.mdca {
    width: 0;
}




@media screen and (min-width: 600px) and (max-width: 800px) {
    .dca {
        width: 700px;
        height: 300px;
    }

    .mdca {
        width: 0;
    }



}

@media screen and (max-width: 600px) {
    .dca {
        width: 0;
    }

    .mdca {
        width: 300px;
        height: 550px;
    }

}

/* gif */
.wink1 {
    position: fixed;
    width: 30%;
    z-index: 10;
    left: 70%;
    top: 8.5%;
    transform: rotate(90deg);
}

.wink1-1 {
    position: fixed;
    width: 30%;
    z-index: 10;
    left: 18%;
    top: 22.5%;
    transform: rotate(-30deg);


}



.bag {
    position: fixed;
    z-index: 10;
    width: 12%;
    bottom: 10%;
    right: 6.2%;
}

.cloud {
    position: fixed;
    z-index: 10;
    width: 25%;
    bottom: 18%;
    right: 3.5%;
}

.gain-img {
    position: fixed;
    z-index: 10;
    width: 9%;
    bottom: 27%;
    right: 12.2%;
}

.wink1-sum {
    position: fixed;
    width: 10%;
    z-index: 10;
    left: 81%;
    top: 78%;
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    /* IE 9 */
    -moz-transform: rotate(90deg);
    /* Firefox */
    -webkit-transform: rotate(90deg);
    /* Safari and Chrome */
    -o-transform: rotate(90deg);
    /* Opera */
}

.sound-title-power {
    position: fixed;
    z-index: 10;
    right: 10%;
    bottom: 85%;
    font-size: 8vw;
    cursor: pointer;
    color: #000;
    width: 6%;
}

.sound-option-power {
    position: fixed;
    z-index: 10;
    left: 4%;
    bottom: 1%;
    font-size: 8vw;
    cursor: pointer;
    z-index: 99;
    color: #019FC4;
}

textarea:focus,
input:focus {
    outline: none;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-2 {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider-2:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider-2 {
    background-color: #f9ca24;
}

input:focus+.slider-2 {
    box-shadow: 0 0 1px #f9ca24;
}

input:checked+.slider-2:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}