*{
    margin: 0; 
    padding: 0;
    font-style: normal;
}

html, body{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

a{
    text-decoration: none;
}

.btn:hover{
    opacity: 0.7;
    cursor: pointer;
}

.disabled{
    opacity: 0.7;
    cursor: initial;
}

.disabled:hover{
    opacity: 0.5;
    cursor: initial;
}

.moving{
    position: absolute;
}

.hidden{
    visibility: hidden;
}

.fontSize_60{
    font-size: 60px !important;
}

.fontSize_30{
    font-size: 30px !important;
}

.fontSize_24{
    font-size: 24px !important;
}

.mgn_32{
    margin-left: 32px !important;
}

.img_max_width_40{
    height: initial !important;
    max-width: 40% !important;
}

.img_max_width_34{
    height: initial !important;
    max-width: 34% !important;
}

.img_lineType{
    background-position-x: 7px !important;
    background-size: 93% !important;
}

.img_lineType_91{
    background-position-x: 6px !important;
    background-size: 91% !important;
}

.img_lineType_90{
    background-position-x: 4px !important;
    background-size: 90% !important;
}

.img_lineType_90_5 {
    background-position-x: 5px !important;
    background-size: 90% !important;
}

.img_lineType_15{
    background-position-x: 15px !important;
    background-size: 93% !important;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently not supported by any browser */
}

.display_none{
    display: none;
}

.covering_layer{
    margin: auto;
    width: 1184px;
    height: 560px;
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    display: none;
}

.covering_layer > div{
    width: 100%;
    height: 100%;
    position: relative;
}


.covering_layer_frame.showing{
    display: initial !important;
    animation: showing 1s 1;
    -webkit-animation:showing 1s 1; /*Safari and Chrome*/
}

@keyframes showing{
    0%   {transform: translate(-50%, -50%) scale(0);}
    100% {transform: translate(-50%, -50%) scale(1);}
}

@-webkit-keyframes showing {
    0%   {transform: translate(-50%, -50%) scale(0);}
    100% {transform: translate(-50%, -50%) scale(1);}
}

.covering_layer_frame.hideing{
    display: initial !important;
    animation: hideing 1s 1;
    -webkit-animation:hideing 1s 1; /*Safari and Chrome*/
}

@keyframes hideing{
    0%   {transform: translate(-50%, -50%) scale(1);}
    100% {
        visibility: hidden;
        transform: translate(-50%, -50%) scale(0);
    }
}

@-webkit-keyframes hideing {
    0%   {transform: translate(-50%, -50%) scale(1);}
    100% {
        transform: translate(-50%, -50%) scale(0); 
        visibility: hidden;
    }
}

.paintMixing{
    margin: auto;
    width: 1184px;
    height: 560px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
}

.paintMixing_title{
    background: url(../img/title.png) no-repeat;
    height: 74px;
    position: relative;
}

.paintMixing_title_markup{
    background: url(../img/markup.png) no-repeat;
    height: 20px;
    width: 270px;
    left: 898px;
    top: 40px;
    position: absolute;
}

.paintMixing_describe{
    background: url(../img/describe.png) no-repeat;
    height: 36px;
    width: 914px;
    margin-left: 136px;
    margin-top: 27px;
}

.paintMixing_options{
    width: 100%;
    height: 85px;
    position: relative;
    margin-top: 19px;
}

.paintMixing_options > div{
    display: inline-block;
    width: 94px;
    height: 85px;
    cursor: pointer;
    position: absolute;
    top: 0;
}

.paintMixing_options > div:hover{
    transform: scale(1.1);
}

.paintMixing_mixFormula{
    height: 175px;
    width: 100%;
    position: relative;
    margin-top: 25px;
}

.paintMixing_mixFormula > div{
    position: absolute;
}

.color_frame{
    height: 175px;
    width: 175px;
    background: #999999;
    display: inline-block;
    border-radius: 15px;
}

#original_color_frame, #mix_color_frame{
    cursor: pointer;
}

#original_color_frame{
    left: 271px;
}

#original_color_frame .title{
    background: url(../img/original-color.png) no-repeat;
    width: 73px;
    height: 23px;
    margin-top: 9px;
    margin-left: 51px;
}

.paintMixing_mixFormula .plus{
    top: 90px;
    left: 457px;
    width: 28px;
    height: 27px;
    background: url(../img/plus.png) no-repeat;
}

#mix_color_frame{
    left: 493px;
}

#mix_color_frame .title{
    background: url(../img/mix-color.png) no-repeat;
    width: 94px;
    height: 24px;
    margin-top: 8px;
    margin-left: 43px;
}

.paintMixing_mixFormula .sign{
    top: 97px;
    left: 676px;
    width: 28px;
    height: 13px;
    background: url(../img/sign.png) no-repeat;
}

#result_color_frame{
    left: 715px;
}

#result_color_frame .title{
    background: url(../img/mix-result.png) no-repeat;
    width: 115px;
    height: 23px;
    margin-top: 8px;
    margin-left: 30px;
}

.color_frame.selected{
    background: #316d30;
}

.color_frame .colorFrame{
    height: 133px;
    width: 165px;
    margin: 5px;
    background: #ffffff;
    border-radius: 15px;
}

.paint_0{
    background: url(../img/paint_0.png) no-repeat;
    left: 53px;
}

.paint_1{
    background: url(../img/paint_1.png) no-repeat;
    left: 163px;
}

.paint_2{
    background: url(../img/paint_2.png) no-repeat;
    left: 273px;
}

.paint_3{
    background: url(../img/paint_3.png) no-repeat;
    left: 383px;
}

.paint_4{
    background: url(../img/paint_4.png) no-repeat;
    left: 493px;
}

.paint_5{
    background: url(../img/paint_5.png) no-repeat;
    left: 603px;
}

.paint_6{
    background: url(../img/paint_6.png) no-repeat;
    left: 713px;
}

.paint_7{
    background: url(../img/paint_7.png) no-repeat;
    left: 823px;
}

.paint_8{
    background: url(../img/paint_8.png) no-repeat;
    left: 933px;
}

.paint_9{
    background: url(../img/paint_9.png) no-repeat;
    left: 1043px;
}

.paintMixing_button{
    height: 78px;
    width: 100%;
    position: relative;
    margin-top: 23px;
}

.paintMixing_button > div{
    position: absolute;
}

.paintMixing_button .scale{
    width: 637px;
    height: 78px;
    position: absolute;
    left: 251px;
    background: #5c9b53;
    border-radius: 11px;
    font-size: 0;
}

.paintMixing_button .scale > div{
    display: inline-block;
}

.paintMixing_button .scale .scale_title{
    width: 135px;
    height: 23px;
    margin-left: 23px;
    margin-top: 28px;
    background: url(../img/scale.png) no-repeat;
}

.paintMixing_button .scale .scale_button{
    width: 454px;
    height: 68px;
    margin: 5px;
    background: #316d30;
    border-radius: 11px;
    float: right;
}

.paintMixing_button .scale .scale_button > div{
    height: 100%;
    display: inline-block;
    cursor: pointer;
}

.paintMixing_button .scale .scale_button .mix_same{
    margin-left: 28px;
}

.paintMixing_button .scale .scale_button .mix_less{
    margin-left: 34px;
}

.paintMixing_button .scale .scale_button .mix_many{
    margin-left: 34px;
}

.paintMixing_button .scale .scale_button .radio{
    width: 28px;
    height: 29px;
    background: url(../img/scale_button.png) no-repeat;
    display: inline-block;
    margin-top: 21px;
}

.paintMixing_button .scale .scale_button .radio_selected{
    width: 17px;
    height: 18px;
    background: url(../img/radio_selected.png) no-repeat;
    display: block;
    margin-top: 6px;
    margin-left: 5px;
}

.paintMixing_button .scale .scale_button .mix_same .text{
    width: 58px;
    height: 29px;
    background: url(../img/scale_button.png) no-repeat;
    content: "";
    display: inline-block;
    margin-left: 12px;
    margin-top: 21px;
    background-position: -42px 0;
}

.paintMixing_button .scale .scale_button .mix_less .text{
    width: 89px;
    height: 29px;
    background: url(../img/scale_button.png) no-repeat;
    content: "";
    display: inline-block;
    margin-left: 12px;
    margin-top: 21px;
    background-position: -174px 0;
}

.paintMixing_button .scale .scale_button .mix_many .text{
    width: 59px;
    height: 29px;
    background: url(../img/scale_button.png) no-repeat;
    content: "";
    display: inline-block;
    margin-left: 12px;
    margin-top: 21px;
    background-position: -338px 0;
}

.paintMixing_button .reset_button{
    width: 212px;
    height: 62px;
    position: absolute;
    left: 914px;
    background: #666666;
    border-radius: 11px;
    font-size: 0;
    margin-top: 9px;
    cursor: pointer;
}

.paintMixing_button .reset_button .text{
    width: 159px;
    height: 30px;
    background: url(../img/reset.png) no-repeat;
    display: inline-block;
    margin-left: 29px;
    margin-top: 15px;
}