#system_content {

    padding: 50px 0;

}





.system_table {

    display: table;

    width: 100%;

    border-collapse: collapse;

    border: #eee 1px solid;

    box-shadow: 0 0 15px rgba(0,0,0,0.1);

}



.table_row {

    display: table-row;

    border: #eee 1px solid;

}



.table_row + .table_row {

    border-top: #eee 1px solid;

}



.table_cell {

    display: table-cell;

    padding: 25px;

    text-align: center;

    vertical-align: middle;

}



.table_cell + .table_cell {

    border-left: #eee 1px solid;

}



.table_cell.left, .head .table_cell.left {

    text-align: left;

}



.table_cell.name {

    text-align: left;
    font-size: 15px;
    color: #666666;

}



.head .table_cell {

    font-size: 16px;

    font-weight: 400;

    color: #333;

    text-align: center;

}



.table_cell:first-child img {

    width: 125px;

}



.table_cell:last-child img {

    width: 25px;

}



.table_cell select {

    height: 50px;

    padding: 15px;

    border: #eee 1px solid;

    border-radius: 0;

    text-align: center;

    vertical-align: middle;

}





.system_option {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    width: 100%;

    margin-top: 50px;

}



.system_option > * {

    width: calc( 50% - 25px );

}



.button_area {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

}



.button_area a {

    padding: 1rem 2rem;

    margin-top: 0;
    color: white;

}



.button_area a + a {

    margin-left: 25px;

}





.system_info {

    padding: 25px;

    border: #eee 1px solid;

    box-shadow: 0 0 15px rgba(0,0,0,0.1);

}



.info_list {

    display: flex;

    flex-direction: column;

    width: 100%;

}



.info_list li {

    display: flex;

    justify-content: space-between;

    align-items: center;

    width: 100%;

    margin-bottom: 15px;

}



.system_table input[type='checkbox'] {

    display: none;

}



.system_table input[type='checkbox'] + label {

    position: relative;

    display: inline-block;

    width: 25px;

    height: 25px;

    border-radius: 25px;

    border: #ccc 1px solid;

}



.system_table input[type='checkbox']:checked + label:after {

    content: '';

    position: absolute;

    top: 4px;

    left: 4px;

    width: 15px;

    height: 15px;

    border-radius: 20px;

    background: #bbb;

}







#step_button {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



#step_button a {

    width: 100%;
    padding: 1rem 2rem;
    color: white;

}


#step_button a:hover{
    color: #6dd0cd;

}












#system_list {

    display: flex;

    flex-direction: column;

    border: #eee 1px solid;

    box-shadow: 0 0 15px rgba(0,0,0,0.1);

    padding: 25px;

    margin-top: 25px;

}



.system_list_item {

    width: 100%;

}



.system_list_item + .system_list_item {

    margin-top: 18px;

}



.system_list_item input, .system_list_item select, .system_list_item textarea {

    height: 45px;

    line-height: 45px;

    margin-top: 5px;

    border: 0;

    border-bottom:#e0e0e0 1px solid;

    border-radius: 0;

}



.system_list_item input {

    width: 100%;

}



#address_input {

    display: flex;

    flex-direction: row;

}



#address_input > * {

    min-width: 100px;

}



#address_input > * + * {

    margin-left: 15px;

}



.system_list_item textarea {

    width: 100%;

    height: 150px;

    border: #e0e0e0 1px solid;

}

















#system_sum {

    display: flex;

    flex-direction: column;

    border: #eee 1px solid;

    box-shadow: 0 0 15px rgba(0,0,0,0.1);

    padding: 25px;

    margin-top: 25px;

}



.sum_item {

    display: flex;

    flex-direction: row;

    justify-content: flex-end;

    width: 100%;

}



.sum_item > * {

    width: 200px;

    line-height: 35px;

    text-align: right;

    color: #aaa;

}



.sum_item .bold {

    color: #333;

}















#system_info {

    display: flex;

    flex-wrap: wrap;

    flex-direction: row;

    justify-content: space-between;

    border: #eee 1px solid;

    box-shadow: 0 0 15px rgba(0,0,0,0.1);

    padding: 25px;

    margin-top: 25px;

}



.info_item {

    display: flex;

    flex-direction: row;

    width: calc( 50% - 25px);

}



.info_item > * {

    line-height: 35px;

    color: #aaa;

}



.info_item .title {

    width: 150px;

    margin-right: 25px;

    color: #333;

}



.info_item:nth-last-child(2), .info_item:last-child {

    width: 100%;

}













#system_descriptopn {

    display: flex;

    flex-direction: column;

    border: #eee 1px solid;

    box-shadow: 0 0 15px rgba(0,0,0,0.1);

    padding: 100px;

    margin-top: 25px;

    line-height: 35px;

    color: #666;

}



#system_descriptopn h3 {

    font-weight: 400;

    margin-bottom: 25px;

}









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





    #step_button {

        flex-direction: column;

    }

    

    #step_button a {

        width: 100%;

    }

    





    .system_table, .system_table .table_row, .system_table .table_cell {

        display: block;

        border: 0;

    }



    .system_table .table_row.head {

        display: none;

    }



    .system_table {

        box-shadow: 0 0 0 rgba(0,0,0,0);

    }



    .system_table .table_row {

        padding: 25px;

        box-shadow: 0 0 15px rgba(0,0,0,0.1);

        margin-bottom: 25px;

    }



    .system_table .table_row:last-child {

        margin-bottom: 0;

    }



    .table_cell {

        text-align: left;

        padding: 10px;

        padding-left: 100px;

    }



    .table_cell:before {

        display: inline-block;

        content: '';

        font-size: 14px;

        color: #aaa;

        width: 100px;

        margin-left: -100px;

    }



    .table_cell.p_img:before {

        content: 'IMAGE';

    }



    .table_cell.name:before {

        content: 'PRODUCE NAME';

    }



    .table_cell.p_quantity:before {

        content: 'QUANTITY';

    }



    .table_cell.p_price:before {

        content: 'PRICE';

    }



    .table_cell.p_sum:before {

        content: 'TOTAL';

    }



    .table_cell.p_option:before {

        content: 'REMOVE';

    }



    .table_cell.s_way:before {

        content: 'NAME';

    }



    .table_cell.s_description:before {

        content: 'DESCRIPTION';

    }





    .table_cell:first-child img {

        width: 200px;

    }

    

    .system_option {

        flex-direction: column;

    }



    .system_option > * {

        width: 100%;

    }



    .system_option > * + * {

        margin-top: 25px;

    }





    .system_table input[type='checkbox'] + label {

        position: relative;

        display: inline-block;

        width: auto;

        height: auto;

        padding: 5px 10px;

        border-radius: 25px;

        border: #ccc 1px solid;

        margin-left: -110px;

    }



    .system_table input[type='checkbox'] + label:before {

        content: 'select';

    }

    

    .system_table input[type='checkbox']:checked + label:after {

        display: none;

    }



    .system_table input[type='checkbox']:checked + label {

        background: #bbb;

        color: #fff;

    }





    #address_input {

        flex-direction: column;

    }

    

    #address_input > * {

        min-width: 100%;

    }

    

    #address_input > * + * {

        margin-left: 0;

    }









    .info_item {

        flex-direction: column;

        width: 100%;

    }



    .info_item + .info_item {

        padding-top: 15px;

        margin-top: 15px;

        border-top: #aaa 1px solid;

    }









    #system_descriptopn {

        padding: 25px;

    }

    



}