.diybox {
    /* background: rgba(255, 255, 255, 1);
    border-radius: 8px;
    box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); */
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-top: 1px solid #eee;
    padding-top: 20px;
}
.commontips h2.name{
    font-size: 20px;
    color: #333;
    font-family: Poppins-Bold;
    margin-bottom: 10px;
}
.commontips p.blue {
    font-size: 14px;
    font-family: Poppins-Medium;
   color: #764209;
    margin-bottom:10px;
}
.commontips .select_horde li {
    text-align: center;
    line-height: 24px;
    cursor: pointer;
    float: left;
    border-radius: 8px;
    width: 20%;
    display: flex
;
    align-items: center;
}
.commontips .select_horde li label {
    display: block;
    width: 16px;
    height: 16px;
    border: 1px solid #666;
    border-radius: 3px;
    margin-right: 8px;
    position: relative;
    margin-bottom: 0;
}
.commontips .select_horde{display:none}
.commontips .select_horde.cur{display:block}
.commontips .rows{
    display: flex;
    justify-content: space-between;
    margin-bottom:20px;
}
.commontips li.hot{
    width:16%;
    border: 1px solid #D6D6D6;
    border-radius: 4px;
    height:40px;
    line-height:40px;
    font-family: Poppins-Regular;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}
.commontips li.hot img{
    width: 25px;
    margin:0 2px 0 0;
}
.commontips li.hot.active{
        /* background: url(/mmoso/image/choses.png) no-repeat right bottom; */
    background-color:#3E5DB1;
    color: #fff;
    border: 1px solid #375AB8;
}
.commontips li.hot:hover{
    border: 1px solid #375AB8;
    box-shadow: 0px 0 18px 1px #e9e9e9;
    transition: all .5s ease;
}
.select_horde li.checked span, .select_horde li:hover label, .select_horde li:hover span, .select_horde li:hover {
    color: #2B6CBB !important;
    border-color: #2B6CBB !important;
}
.select_horde .checked label {
    border-color: #2B6CBB;
}
.select_horde .checked label::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    background-color: #2B6CBB;
}
.select_horde li span {
    color: #333;
    font-family: Poppins-Regular;
    font-size: 14px;
    text-align: left !important;
}
.diybox .left {
    width: 67%;
}
.diybox .left h2:nth-of-type(2){
        border-top: 1px solid #eee;
    padding-top: 20px;
}
.diybox .left ul {
    display: flex;
    grid-gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.diybox .left li {
   
    width: 32%;
    padding: 10px 22px 10px 12px;
    line-height: 20px;
    font-size: 15px;
        font-family: 'Poppins-Medium';
    border-radius: 6px;
    cursor: pointer;
    background:#E6EAF8;
    position: relative;
    border:1px solid transparent;
    color: #444;
}
.diybox .left li:hover {
    color: #3f84c7;
    border-color: #3f84c7 !important;
    box-shadow: 0px 0 18px 1px #e9e9e9;
    border:1px solid #3f84c7;
        transition: all .5s ease;
}
.diybox .left li.active {
    background-image: url(../../image/ok.png), linear-gradient(134deg, #1C8ECE 0%, #3580D1 100%);
    background-size: 18px, auto;
    background-position: center right 6px, 0 0;
    background-repeat: no-repeat;
    color: #fff;
    cursor: pointer;
    transition: color 400ms;
}



.diybox .left h2 {
    font-size: 16px;
    font-family: Poppins-SemiBold;
    margin-bottom: 10px;
    color: #333333;
}

.diybox .right {
    width: 31%;
       padding: 34px;
    background-image: url(/mmoso/image/d4/texture/1477700437.webp), url(/mmoso/image/d4/texture/1764126282.webp), url(/mmoso/image/d4/texture/1526734248.webp), url(/mmoso/image/d4/texture/3780277120.webp), url(/mmoso/image/d4/texture/202353459.webp), url(/mmoso/image/d4/texture/4146987251.webp), url(/mmoso/image/d4/texture/3758777576.webp), url(/mmoso/image/d4/texture/3713853190.webp), url(/mmoso/image/d4/texture/2627685972.webp), url(/mmoso/image/d4/texture/1571930207.webp), url(/mmoso/image/d4/texture/341349362.webp), url(/mmoso/image/d4/texture/740280586.webp), url(/mmoso/image/d4/texture/3050467246.webp), url(/mmoso/image/d4/texture/2961682941.webp), url(/mmoso/image/d4/texture/543043890.webp), url(/mmoso/image/d4/texture/2579685949.webp), url(/mmoso/image/d4/texture/3532517776.webp), url(/mmoso/image/d4/texture/1505111514.webp), url(/mmoso/image/d4/texture/2191061733.webp), url(/mmoso/image/d4/texture/3592820536.webp), url(/mmoso/image/d4/texture/147656464.webp), url(/mmoso/image/d4/texture/1927892788.webp), url(/mmoso/image/d4/texture/584956099.webp), url(/mmoso/image/d4/texture/1305988728.webp), url(/mmoso/image/d4/texture/4189434499.webp), url(/mmoso/image/d4/texture/819645078.webp);
    background-position: left bottom, 64px bottom, right bottom, left 64px, right 64px, left top, 64px top, right top, left 74.5px bottom 10.5px, left 10.5px bottom 10.5px, right 10.5px bottom 10.5px, left 10.5px top 74.5px, 74.5px, right 10.5px top 74.5px, left 74.5px top 10.5px, left 10.5px top 10.5px, right 10.5px top 10.5px, left 43px bottom 10.5px, left 10.5px bottom 10.5px, right 10.5px bottom 10.5px, left 10.5px top 43px, 43px, right 10.5px top 43px, left 43px top 10.5px, left 10.5px top 10.5px, right 10.5px top 10.5px;
    background-repeat: no-repeat;
    background-size: 64px, calc(100% - 128px) 64px, 64px, 64px calc(100% - 128px), 64px calc(100% - 128px), 64px, calc(100% - 128px) 64px, 64px, calc(100% - 149px) 64px, 64px, 64px, 64px calc(100% - 149px), calc(100% - 149px) calc(100% - 149px), 64px calc(100% - 149px), calc(100% - 149px) 64px, 64px, 64px, calc(100% - 86px) 33px, 33px, 33px, 33px calc(100% - 86px), calc(100% - 86px) calc(100% - 86px), 33px calc(100% - 86px), calc(100% - 86px) 33px, 33px, 33px;
    background-color: #1b130e;
    position: relative;
    margin-top:35px;
    font-family:Poppins-Regular;
    font-size: 14px;
    color: #d7d7d7;
}



.diybox .right h2 {
    color: #F5C679;
    padding-bottom: 15px;
    border-bottom: 1px solid #705A2F;
}

.diybox .right h3 {
     font-size: 24px;
    margin: 0 0 8px;
    color: #ff8000;
    
    line-height: 26px;
 
}
.diybox .right .flex-box>div{
 max-width: calc(100% - 64px);
}
.diybox .right p.name {
    font-size: 14px;
    line-height: 30px;
    color: #ff8000;
    padding-bottom: 5px;
    line-height: 20px
}



.diybox .right .affixes-box select {
      display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding-left: 16px;
    border: 1px solid #555;
    font-size: 14px;
    border-radius: 6px;
    color: #dca779;
    -webkit-appearance: none;
    margin: 12px 0 20px;
    background: #161923 url(../../image/down.png) no-repeat scroll right 14px center;
}
.diybox .right .flex-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
       padding: 4px 0;
           border-bottom: 1px solid #705A2F;
}

.diybox .right .affixes-box>div.select {
   padding-top:10px;
}



.diybox .right .amount {
    padding: 10px 0 15px;
}

.diybox .right .amount .title, .diybox .right .amount .inputs {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.diybox .right .amount .title span:first-child, .diybox .right .amount .title span:last-child {
    width: 32%;
    font-size: 14px;
    line-height: 21px;
    color: #DEDEDE;
}

.diybox .right .amount .input-num, .diybox .right .amount select {
    width: 54%;
    border: 1px solid #B29E78;
    border-radius: 4px;
    font-size: 14px;
    padding-left: 10px;
    box-sizing: border-box;
    color: #DEDEDE;
    height: 33px;
    line-height: 33px;
}

.diybox .right .amount .input-num {
    display: flex;
    padding: 0;
}

.diybox .right .amount .input-num input {
    background: transparent;
    text-align: center;
    border: none;
    color: #DEDEDE;
    width: 60%;
    height: 30px;
    line-height: 30px;
}

.diybox .right .amount .subtract, .diybox .right .amount .add {
    width: 50px;
    font-size: 18px;
    text-align: center;
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    transition: all .1s;
}

.diybox .right .amount .subtract span {
    width: 10px;
    height: 1px;
    background: #DEDEDE;
    display: inline-block;
    vertical-align: middle;
}

.diybox .right .amount .subtract:hover span {
    transform: scale(1.1);
}

.diybox .right .amount .add:hover {
    font-size: 24px;
}

.diybox .right .amount select option {
    color: #333;
}

.diybox .right .amount input::-webkit-input-placeholder {
    color: #DEDEDE;
}

.diybox .right .amount .title span:last-child, .diybox .right .amount select {
    width: 60%;
}

.diybox .right .affixes-box>div, .diybox .right .time {
    font-size: 14px;
    line-height: 20px;
    color: #DEDEDE;
    margin-bottom: 4px;
}

.diybox .right .affixes-box>div {
    margin-bottom: 8px;
}

.diybox .right .affixes-box li {
    font-size: 14px;
    line-height: 21px;
    position: relative;
    color: #bab0a3;
    font-weight: bold;
    padding-left: 20px;
    margin-bottom: 4px;
}

.diybox .right .affixes-box li:before {
    content: '';
    width: 8px;
    height: 8px;
    background: #bab0a3;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    position: absolute;
    left: 0;
    top: 7px;
}

.diybox .right .affixes-box .check {
    margin-bottom: 10px;
}

.diybox .right .affixes-box .check a {
   
    padding: 0 10px;
   color: #B0A799;
}



.diybox .right .pricebox {
    display: flex;
    justify-content: space-between;
    padding:20px 0 10px;
}
.diybox .right .pricebox  .price{
font-size: 24px;
    color: #facd91;
}
.diybox .right .pricebox a {
    width: 160px;
    height: 48px;
    line-height: 48px;
    background: #898989;
    font-size: 16px;
    color: #FFFFFF;
    border-radius: 4px;
    font-family: Poppins-Semibold;
    text-align: center;
    display: block;
  
}

 .diybox .right .pricebox a.active {
        background: linear-gradient(315deg, #377FD1 0%, #1C8ECE 100%);
}

.diybox .right .time {
    border-top: 1px solid #705A2F;
    padding-top: 12px;
}

.diybox .right .pricebox span {
    font-size: 14px;
    color: #DEDEDE;
}

.diybox .right .pricebox em {
    font-size: 18px;
    color: #F7F709
}

.layers1  .pops{
       width: 417px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    background: url(../../image/popbg.png) no-repeat top center / 100%;
    background-color: #fff;
    padding: 35px 25px 25px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 6px;
     max-width: 90%;
}
.layers1   .dels{
     position: absolute;
    right: 15px;
    top: 15px;
    cursor: pointer;
}

.layers1  .pops h3 {
    color: #000;
    font-size: 20px;
    margin-bottom: 20px;
        font-family: Poppins-Medium;
}
.layers1  .pops p {
    font-size: 16px;
    font-family: Poppins-Regular;
    text-align: left;
    color: #000;

}
@media only screen and (max-width: 1024px) {

.commontips h2.name{font-size: 18px;}
.commontips li.hot,.commontips .select_horde li,.diybox .left li{
    width: 49%;
    margin-bottom:7px;
}
.commontips li.hot{
    text-align: left;
    padding: 0 0 0 10px
}
.commontips .rows{flex-wrap: wrap;}
.commontips .category.cur,.diybox .left ul{display: flex;justify-content: space-between;flex-wrap: wrap; grid-gap: 0px;}
.diybox {display:block}
.diybox .left,.diybox .right{width:100%}
.diybox .right{margin-top:20px;}
}